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>
Related
body {
background-image: linear-gradient(180deg, rgba(58,58,158,0.8),
rgba(136,136,206,0.7)),
url("pic.jpeg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100vh;
margin: 0;
color: white;
font-family: "Roboto", sans-serif;
}
So the issue im having is when i shorten the height the background image stops at some point and the flex container keeps running on into white space. The width scales properly of the picture, just the height is not right.
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
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%;
}
So I am making layout for an SMF forum and the background image is centered perfectly when the browser window is wide enough. However when I start shrinking the browser window, the background image starts moving to the left. Here is my current CSS for the background:
body
{
background: #fefff1 url(../images/img/bg.gif) no-repeat;
background-position:top center;
margin: 0 auto;
color: #7C3C4A;
padding: 0px 5%;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
}
Here's a screenshot of the forums so that you can visualize it better:
http://i.imgur.com/49pRI.png
body
{
background-color: #fefff1;
background-image: url(../images/img/bg.gif);
background-position: center center; /* First value is from left and second is from top. You can use use number as well*/
background-repeat:no-repeat;
}
Your code seems about right.
Only thing I did was consolidate background-position into the same background attribute up top like so:
body {
background: #fefff1 url(../images/img/bg.gif) no-repeat top center;
margin: 0 auto;
color: #7C3C4A;
padding: 0px 5%;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
}
Here's a JFiddle of it - JFiddle Link
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...:)