My goal is to take an image (size varies) and have it fit within a set container (330x330 pixels). I do not want to resize the image. I want to simply have the css have it automatically move itself to cetner the picture as if it were cropped with 330x330.
If I put in a picture that is smaller than 330x330 though then i supposed it would have to scale it up. For instance if it were 200x800 then it would stretch it out and then shift the image vertically to show the center?
Is this possible or is what I am trying to do impossible without a lot of annoying PHP? Thanks
You can use:
div {
width: 330px;
height: 330px;
background: url("http://placekitten.com/800/200") 50% 50% no-repeat;
background-size: cover;
}
It should works on: IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.
Related
i want to put full screen background into my personal Wordpress site, and having some issue with it. I tryed to insert fullscreen background in this way:
body {
background-image: url(https://testsite.com/wp-content/uploads/2018/04/Backround5.jpg) !important;
background-size: cover !important;
}
but when load the site, it shown background in full size for second and after that back , again to corners background.. How to set background image to show in full size, including page content? Affected URL. Thanks in advance.
As previously mentioned, the reason why this is happening is because you have other elements that have backgrounds which are being rendered over-top of your body.
There's a background:black being assigned to a number of your elements. I've done a live inspection and edited a number of them to have background:transparent !important, to override the setting in order to display the background from the body.
You will need to go through your site, much like I did in screenshot provided below, and you'll have to find out which elements have a background, and set their background to transparent.
What I've done to remove the backgrounds from those two elements on your homepage is:
A)
#media_image-2 {
background: transparent !important;
}
.widget-odd .widget-last .widget-first .widget-1 .def-block .widget .clr .widget_media_image {
background: transparent !important;
}
B)
.ult_tabs .ult_tab_min_contain.tabanimate {
background: transparent !important;
}
Once you've eliminated all of the backgrounds on the elements in front of your body, you will be able to see your main background just like in the screenshot provided.
EDIT (In addition to previous solution):
If the intention is to create a full-parallax style background where the background is more or less fixed in a position regardless of where you're scrolling... add this to the CSS of your body:
background: url(yourbackground.jpg) no-repeat center center fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
try this on body for background
background-attachment: fixed;
and for others elements
.ult_tabs .ult_tab_min_contain.tabanimate{
background-color: transparent !important;
}
Hi Guys Im using this class to put a responsive image as a background for a div, it works well and it is responsive . the only issue I have is that the image is not shown completely, I mean it is a large image, it is centered and everything is correct except that I can't see the top and the bottom of the image, what can I add to see this large image fully and keep the responsive behavior?
.bg {
background-image:url("image local url");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
You must put the actual img tag with the correct image and hide it with css. Something like this:
img {
width: 100%;
visibility: hidden;
}
With this method, the actual img will resize the container to the proper content so that it always fits the image and you will get the quality of the background image. Let me know if this works
The issue is a bit problematic to create a fiddle but I found a template that has a similar problem: http://www.elegantthemes.com/demo/?theme=StudioBlue
The issue is the following: there's a wrapper that has all the content inside of it and a background image positioned at the top center with no-repeat. Everything looks fine, until you resize the window until the window size is smaller than the content/wrapper size.
At this point everything still looks fine as the left edge of the content is aligned with the left side of the browser and you get a scroll bar at the bottom. However, if you scroll to the right you'll see that the background image (since it's centered), actually moved to the left and is now partially of the screen, leaving some blank space to the right. Any idea how I can trick the background image to stay on the screen instead of going off the left side when the window size becomes too small?
you could probably either set the center value to 50% and see what that does (probably nothing different) or you could use media queries for smaller screen sizes. The example you've shown does not have a center position, just a top. Let me know if I understood correctly or what occours! :)
background: gray url(img.jpg) 50% top;
or
#media screen and (max-width:480px) {
body {
background: gray url(img.jpg) left top;
}
}
The issue is that the image is being centered relative to the width of the window when it needs to be centered relative to the scroll width. To fix that, you can create another div at the top of your html to have the background image:
#image-div {
position: absolute;
min-height: 100%;
width: 100%;
background: #000 url('image.jpg') no-repeat center top;
}
Related: https://stackoverflow.com/a/15792723/1721527
On the World of Warcraft forums they have a neat style set up that I'd like to emulate. I didn't know how to do it, so I decided to dig through their stylesheets and grab the pieces of it and put them together to learn how to make a style similar.
When digging through the stylesheets, I found this image. As you can see, it's the background for their forum posts, but it's a fixed size. Here's my question - how are they dynamically creating more length if a user's post is much longer than the picture is?
On a test website I grabbed the same CSS they used for that section. They have it set on overflow:hidden; so that it doesn't keep multiplying the image. Naturally, copying parts of their code gets me this mess on the test website.
It works correctly for smaller posts, since they just have to cut it off, but I'm assuming they have maybe a very thin (set width, perhaps 1 pixel in height) .jpg image that they are multiplying depending on the size of the forum post.
Does anybody know how I might go about doing this?
P.S. Naturally I'm not going to be using their images and such - I'm only copying it for now just to understand how to make my own.
Something like:
CSS:
.post
{
background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat;
}
(the image and the color are those really used, hope they don't sue me for that :) )
is what you're looking for. The background image is positioned on top and stays there, while the rest of the container's height has the same background color that the image fades to (using a gradient). So it's just an illusion of a stretched image, but effectively is just that you don't see the interruption where the image ends
It looks like their background color for the post is the same as the color at the very bottom of that image. That way it just "fades" in - the image does not actually change size.
Example CSS would be:
#yourPostSelector {
background-image: url('path/to/image.jpg');
background-position: top left; /* or 'top center' - whatever works for you */
background-attachment: scroll;
background-color: #000000; /* pick the bottom color of your background image */
}
Just change you background color which you have used is #00000*
It should be changed to the color of the background image which you use, basically the bottom part so that it blends perfectly. Presently as per your present image the code would be like this :-
.body {
background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
clear: both;
height: 100%;
margin: 0 auto;
overflow: hidden;
width: 990px;
}
Update this class and check the result, if you don't understand comment here would make you understand.
OK, let's say I have this image:
In my Java game, I use a cropping method which crops each monster of 32x32 pixels and thus puts in monster[0] onwards. Anyways, in PHP, is there some way I can do this? Like crop an image and go from there?
Any help would be appreciated.
You can use imagecreatefromgif() with PHP where you can create a new image on the fly by giving specific x and y positions. Rather than just me copy/pasting the code, here is the link to the documentation.
http://php.net/manual/en/function.imagecreatefromgif.php
You can also use different variations of imagecreatefromgif() such as imagecreatefromjpeg() or imagecreatefrompng() etc
All are linked to on the PHP documentation page as well as more examples in the comments.
Hi you can crop the image via imagecopyresampled the man page
http://php.net/manual/de/function.imagecopyresampled.php
You just have to set the correct offset.
if this should be displayed in a Browser you can do it even via CSS
.selector {
height: 32px;
width: 32px;
overflow: hidden;
display: inline-block;
background: url(theimage.gif) -32px 0px no-repeat;
}
Hope it helps
Don't crop it. You can use it as it is with CSS background-position. The the sive of a and move the background to the image you want. It is faster than loading every image on its own.