I set the Header image on WordPress, but when I change the size of the screen, the image repeats itself, and I have to place only one Header image without repetition.
Basically you shoud use the background-repeat css property on the element wich have the background, then you should use the background-size property to fit the image to the element, eg
.header {
background-image: url("/pth/to/your/image.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.header is only an example, it could not work in your page, please write this rule with the right css path to your element, or post a link to your page for understanding how to do this rule working. Also you should need some property more to positioning the background image, or different values for each property, eg contain or auto for background-size.
Related
I'm trying to fix an issue. I have a background advertising (skin) and I must increase the size: the same adv is served for two website, but one of the website has a larger container.
I try with background-size property, but when I try to set "110%" the behavior of the background is related to the windows, so if I resize the browser the skin follow the browser.
Ho can I increase the size of the background keeping it centered on the container?
Using background-size:cover you can make a (centered) image stretch over the full size of a container element. For example:
.background {
background: url(image.jpg) 50% 50% no-repeat;
background-size: cover;
}
Try scaling the result field in this example fiddle. You'll see the image scaling to fill the div no matter what format. Read more about using background-size: cover it on CSS tricks.
My slider background shows up in Chrome, Firefox, and most versions of IE, but not in IE8. Its background stays the same color as the rest of the page.
.site-slider {
width: 100%;
background: url(images/alexandria/header_overlay.png) no-repeat center top,
url(images/alexandria/header_bg.jpg);
}
If I change background to background-image, every browser shows the same thing that IE8 does.
IE doesn’t support multiple backgrounds until version 9. You can get around this by adding a wrapper element and applying one background to the parent and one to the child.
.site-slider-wrapper {
background-image: url(images/alexandria/header_bg.jpg);
}
.site-slider {
background: url(images/alexandria/header_overlay.png) no-repeat center top;
}
The reason changing the property name to background-image breaks the CSS in every browser is that the first background sets background-repeat and background-position properties (no-repeat center top) as well, which aren’t valid as part of background-image.
(The whole point of background is to be a shorthand for the background-* properties.)
You're using a CSS3 "Multiple Backgrounds" feature, which isn't supported in IE8. See its support on this link
Please read this tutorial and find the heading where it says "Multiple Backgrounds". Here you'll find a way to make this property work on IE8 as well.
Secondly, background is a shorthand property where you can combine/define values for the following properties:
background-color
background-image
background-repeat
background-attachment
background-position
Eg: background: #00ff00 url("smiley.gif") no-repeat fixed center;
On the other hand, if you use any property from the list above, it will accept only values specific to them. They won't work if you'll try to combine any other property value with them. Because of the same reason, your background-image property isn't working. You can only define the urlof the image as a value of background-image
Eg: background-image: url("paper.gif");
Adding this line
src /*\**/: url('skins/fonts/titillium/TitilliumText22L003-webfont')\9
seemed to fix it...
On my website, I am having a dilemma. (This website). On the homepage the background is across the whole page (which is what I want), where as on the contact page it is not. I have made it transparent using:
#siteWrapper{
background-color: rgba(0,0,0,0)
}
However, this only turns it black? On the header of the page, there is the image but not on the background of the body? I can do it the other way around so the body has an image and the header does not (like this):
#siteWrapper{
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/141565 4282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: 100%;
}
However I would like it so the image covers all of the page (header and body background) - Thanks
ADDITION
I tried to use background-size: cover; however that only covered the footer and not the header (as well as stretched the image).
You can put the background-image on your body element, and set background-size:100%, and remove it as the background image from the other elements which it is on. This will work on all page across the site.
There doesn't appear to be anything in your footer so you can just get rid of the footer all together to have the image take up 100% of the webpage with your code above.
I want to make a background like this except using an image instead of the blue background: http://gakeyclub.org/
Notice that resizing the window of the browser does not disturb the background. What do I need for this?
According to your comment, what you are asking is to have your background center on your page. To do so use background-position this will tell the browser where to position the background according to its container.
background-position:50% 50%;
You might like to add some other background attributes such as background-repeat:no-repeat to make sure the picture does not repeat on huge resolutions.
this is how your css should be looking for a fixed image as background:
body
{
background-image:url('image.png');
background-repeat:no-repeat;
background-attachment:fixed;
}
Why do you want to use an image. It will just increase the size of the page. Use this code:-
background: none repeat scroll 0 0 #002f5f;
I have some divs, and they have their backgrounds set as images using this:
background:url(myimage.jpg);
Now what I'm looking to do is set a border on that image that is set to the background.
I don't want to set a border on the div as this does not give the desired result, it must be a border on the image.
Not sure if this is possible, is it?
You could try using multiple backgrounds, by setting your base bg image and a second one as a border.
#container {
background-image: url(Main-bg), url(Border-img.png);
background-position: center center, left bottom; /* border bottom in this case */
background-repeat: no-repeat;
}
It is not possible to do it precisely as you've mentioned. Since the background image is styling, rather than content, no additional styling can be added to it.
The best option would be to create a different image file to serve the bolder border.