I have multiple background images on my wordpress site http://casper-creations.com, one is the background image and the other a transparent diagonal line pattern over the top it works fine but it doesn't repeat on the full page if you look carefully on the first page it only seems to go half way down, you can see it clearer on this page http://casper-creations.com/weddings-2/
Here is my css, I have it set to repeat so not quite sure why it isn't repeating the full length of the page...any ideas anyone?
Thanks...
html {
overflow-y: scroll;
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
background: #c2e8eb url(http://casper-creations.com/wp-content/themes/responsive/core/images/bg-cloud.jpg) repeat-x;
}
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5em;
background: url(http://casper-creations.com/wp-content/themes/responsive/core/images/bg-diagonal-pattern.png) repeat;
}
It's because of this fragment of code http://take.ms/Nixqs
html, body {
height: 100%;
}
When you set body as 100% width background-attachment: fixed image is repeated as long as the height of the body, so only 100% of whole window. Remove it and everything should be ok.
Here is image with working example
You are having problem with different heights on body and html. Just and min-height: 100%; to body selector.
body {
min-height: 100%;
}
If there isn't a way to edit the css I have there is a better way to re-write the css for the body and html tags completely so there is a multiple background with the diagonal lines on top and the cloud underneath
Related
I am attempting to make the banner resize automatically depending on the size of your monitor.
This is the current code:
body {
font-family: 'PT Sans', sans-serif;
font-size: 13px;
line-height: 18px;
color: #fff;
height: 100%;
background: #0b0b0b url({resource="settings/header_bg.png" app="core" location="global"}) no-repeat scroll center top;
margin: 0;
I have tried some different things, but none have worked so far.
How can I accomplish this task?
Use background size at 100% width. Depending on the height of your page, cover might be too tall
body {
font-family: 'PT Sans', sans-serif;
font-size: 13px;
line-height: 18px;
color: #fff;
height: 100%;
background: #0b0b0b url(http://www.placekitten.com/1900/500) no-repeat scroll center top;
background-size: 100% auto;
margin: 0;}
Edit: 100% will make the image the full width of your screen so it "resizes automatically" depending on the device/screen. The auto for the height value makes it so that your image aspect ratio is preserved because you probably wouldn't want it all stretched out right? But that does mean that your image is going to grow taller when you widen the window.
It should also be noted that putting a heading banner as a background image on the body tag is a bit unusual. Most of the time, people put a header image in a div tag. This would allow you to set a fixed pixel height on the div that's not the whole page if you like and then you could crop part of the image if that's what you're going for.
Like others have noted, it's really not that clear what you're trying to do and more explanation would help.
background-size: cover
resizes the background image to cover the entire body, but the image may be stretched or cut.
background-size: contain
resizes the background image to make sure the image is fully visible.
body, html {
height: 100%;
}
body {
font-family: 'PT Sans', sans-serif;
font-size: 13px;
line-height: 1.3846; /*18px*/
color: #fff;
margin: 0;
background-color: #0b0b0b;
background-image: url({resource="settings/header_bg.png" app="core" location="global"});
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Note that the first child container in the body gets a min-height:100% to enable vertical scrolling.
<body>
<div style="min-height:100%;">
YOUR PAGE
</div>
</body>
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
white-space:nowrap;
}
body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
#body {
min-width:1015px;
background-color: #efeeef;
padding-bottom: 35px;
position: relative;
display: inline-block;
vertical-align: top;
}
I have css above in a page of mine. The #body is used for a div that's getting populated by partial views using ajax.
The problem is that when content in #body is overflowing to the right then body does not encapsulate the content of #body, it stays the size of the window when loaded. So when scrolling horizontally the background looks different for the body part in the region that becomes visible when scrolling.
How can i get the body to continue look the same when #body owerflows to the right?
http://jsfiddle.net/q2j4wcmo/
UPDATE:
Hashem Qolami did solve part of my problem, when zooming in on the content in #body, body still incapsulates #body and it looks as it supposed to. But in my solution when loading the page and the content in #body is overflowing body is not encapsulating the content in #body.
Any idea what could be different when running in jsfiddler where it's obviously working as supposed to?
UPDATE 2:
new example
http://jsfiddle.net/q2j4wcmo/10/
One option is changing display type of the <body> to inline-block to let it grow horizontally by its contents.
Also you could use min-width: 100%; to make sure that the <body> always fills the entire page even if its content is not that wide:
EXAMPLE HERE
html {
white-space:nowrap;
width: 100%;
}
body {
display: inline-block;
min-width: 100%;
}
Note: Since a percentage value of min-width refers to the width of the containing block, you have to specify an explicit width of <html> element as well (as I did).
So this website has content inside a background image that has a square in it but it is not centered.
In firefox it is too big, and in Chrome it is too far to the left, and the only way to center it is by pressing ctrl+ (which makes the browser window smaller), and even then it is still not centered.
Does anyone have a fix for this?
Thanks.
You need to centre the background image:
body {
background: #000000 url(images/waves.jpg) center top repeat-x;
}
Essentially if you have a div inside another div or a div inside your html body tag, if the div in question has a width defined, you just need to
.myDiv {
margin: 0 auto;
}
This will work..
body {
background: background: url(images/waves.jpg) center;
}
Personally I use percentages to center the background image:
background-position:50% 50%;
Full code for body:
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #989898;
background-image: url(images/waves.jpg);
background-position: 50% 50%;
}
Am I missing something?
body {
margin: 0 auto;
padding: 0;
font-family: helvetica, sans-serif, Arial;
color: #333333;
font-size: 13px;
background: white url(images/bg.jpg) no-repeat fixed top center;
}
in SearchAndShare.css there is a body {background-attachment: inherit;} rule which, because this sheet is being called later than your main sheet, is overruling the "fixed" from your main sheet
removing that rule fixes Firefox, not sure if inherit is a valid call for a background-attachment but even if it is it would mean you would need to be setting background-attachment: fixed" on thehtmlelement so thebody` has something to inherit from
Update: Yes, if you don't want to mess with the plugin SearchAndShare.css file, adding html {background-attachment: fixed} to your main sheet also fixes it
When using the shorthand background property, the order of the properties should be
color
image
repeat
attachment
position
Try changing the style as follows (change the repeat order and add the attachment and see if it makes a difference:
background: white url(images/bg.jpg) no-repeat fixed center 0;
Then remove the background-attachment:fixed;
EDIT: Apparently mixing keywords and values will cause some browsers to choke. So centre 0 might be the issue in FF.
Try 50% 50% or center center
Try using this
background: url(under.gif) no-repeat fixed 10% 20%;
or
width: 780px;
font-family: Arial;
font-size: 0.8em;
background: url(images/bg.jpg) top left repeat-y;
border: 1px solid #e6930f
Hope this helpz...:)
Supposing I'm setting a background image for a web page in CSS like this:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
background: url(images/desk.gif) repeat bottom left;
}
Is there any way to layer a second image on top of the desk.gif within the body element itself, or is the only way to create a separate class and use the z axis?
Sorry, it's a simpleminded question, but I've been trying to figure this out and though I haven't been able to make it work, I also haven't found a clear slapdown of the idea anywhere online... so, is there a way, or is this just a no can do?
Thanks!
Layered backgrounds are part of the CSS3 Working Draft but, as far as I know, support for them is limited to WebKit/KHTML-based browsers such as Safari, Chrome, Konqueror and OmniWeb.
Using your example code, this would look like:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
background: url("images/top.gif") left bottom repeat,
url("images/desk.gif") left bottom repeat;
}
I've already posted the solution in a duplicate question, but for anyone that may require this information I'll post it here as well.
As far as I am aware it is not possible to put it in the same layer, but it is possible to put several images in separate div's on top of one another, and has been implemented by popular usability testing website Silverback (check the background to see how it has been layered). If you look through the source code you can see that the background is made up of several images, placed on top of one another.
Here is the article demonstrating how to do the effect can be found on Vitamin. A similar concept for wrapping these 'onion skin' layers can be found on A List Apart.
In short, it's not possible. You can do this, but you need to add a second HTML object to the page to get it to work. So for example, place a div block right below your body, and assign the second background to that object.
Hope this helps!
Nowadays this can be done in all the "modern" browsers (not < IE9, afaik). I can confirm that it works in Firefox, Opera, Chrome. There is no reason not to do it, as long as you have a decent fallback solution for older browsers / IE.
For the syntax you can choose between
background:url(..) repeat-x left top,
url(..) repeat-x left bottom;
and
background-image:url(..), url(..);
background-position:left top, left bottom;
background-repeat:repeat-x;
You don't need the linebreaks, but the comma is important.
Attention! The following will create two backgrounds, even though you specified only one image url:
background-image:url(..);
background-position:top, bottom;
And of course, there is the alternative to use nested containers, but this will bloat your html.
Ancient question here but the answer for this is the :after pseudo-element.
SCSS
body {
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/200) repeat bottom left;
&:after {
display: block;
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/100) repeat bottom left;
opacity: 0.5;
}
}
CSS
body {
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/200) repeat bottom left;
}
body:after {
display: block;
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/100) repeat bottom left;
opacity: 0.5;
}
The only way is to use another container. Each element may contain only one background image.
Use absolute positioning and a z-index to get the second element on top.
link text
Above mentioned link best describes what you r upto...
Don't forget you can apply styles to the HTML element:
html {
background: url(images/whatever.gif);
}