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%;
}
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>
This is driving me crazy! I need assistance with this CSS code, please. I have used HTML in the past but I need to use CSS for this layout and I have never used it before. My issue right now is that the top header will not align with the lower image. I can change the margin and everything moves! If I change the size of the picture, it still will not align. Also, when I resize my browser the background moves with it and I need it fixed so the "table" stays in the middle of it. Can you please help?
CSS:
html {
margin: 0;
padding: 0;
}
body {
font-family:Arial, Helvetica, sans-serif;
line-height:18px;
font-size:12px;
color: #06185c;
background: #ffffff url(crysbg.png) no-repeat top center fixed;
margin: 0;
padding: 0;
position: absolute;
}
p {
margin: 10px;
padding: 0;
}
h1, h2, h3 {
display:none;
}
.page-wrapper {
margin: auto;
width:auto;
background:url(topbanner.png) no-repeat top center;
position:absolute;
margin-left: 318px;
margin-right: auto;
}
HTML:
<body id="crystal-self-acceptance">
<div class="page-wrapper">
Images of the issue:
http://i.imgur.com/eI8Cmns.jpg
positioning issue.
i.imgur.com/3EUEYnr.jpg
When the window is resized the center area moves away from the background. (this includes wide screens, just no screenshot of that).
Any help, please?
Edited to add jsFiddle: http://jsfiddle.net/Q3y36/8/
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...:)
* { margin: 0; padding: 0; }
body {
margin: 8px auto;
background: #20272D;
width: 900px;
}
body, td, input, textarea {
font: 11px Tahoma;
color: #DDD;
}
#content {
width: 400px;
margin: auto;
background: url(img/blixt.png) 0px 18px no-repeat;
padding-left: 25px;
}
There's a image (blixt.png) that I want to show up as background no matter how long the content inside <div id="content"> is! If its short only a bit of the image shows and as longer the text the more it shows. How can I fix so it shows the whole image no matter what? I don't want to set height.
You can set a min height, but that will require you to set a IE height fix because min-height won't work in IE.
The problem here is pretty obvious. You have an element with a background image but no height on it, so of course it's going to default to the height of the content inside it.
You can either put a height on the #content element, or move the background image to the body.
try this in the body css:
background-image: url(img/blixt.png) no-repeat;
background-color: #20272D;