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
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>
I need to insert text in the upper and lower of an inner border (both centred) which will have a background image behind it. This will be the same on each page. Can I achieve this using CSS?
Please see screenshot of what I mean:
The border needs to be 3px in width and white in colour and the font is Basis Grotesque Medium.
I'm hoping to start out with a WordPress theme and edit it.
Hopefully this question hasn't been answered before anywhere. I tried running a search but couldn't find what I needed.
Before I go ahead and start building this website could you tell me if this is possible and how I may go about achieving it?
You can use the approach I described here Line separator under text and transparent background for the lines on the left/right of the titles.
You can then use negative top/bottom margin to position them on the bottom and top borders :
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body {
background-image: url(http://fr.playstation.com/media/5ZfqPjVF/BigSkyInfinity_Hero_EN.JPG);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Open Sans', sans-serif;
color:#fff;
}
#content{
border:3px solid #fff;
border-width:0 3px;
display:inline-block;
margin:50px 0;
width:100%;
}
.divider {
font-size:30px;
margin: -0.65em auto -0.45em;
overflow: hidden;
text-align: center;
line-height: 1.2em;
}
.divider:before,
.divider:after {
content: "";
vertical-align: top;
display: inline-block;
width: 50%;
height: 0.65em;
border-bottom: 3px solid #fff;
margin: 0 2% 0 -55%;
}
.divider:after {
margin: 0 -55% 0 2%;
}
p{margin: 150px 0;}
<div id="content">
<h1 class="divider">Top title</h1>
<p>...Content here...</p>
<h2 class="divider">Bottom title</h2>
</div>
Note that top/bottom negative margins will need tweaking according to the font-family you are using
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...:)
Why does the search box here not have 15px padding to the right?
This is the CSS:
#element_right {
padding: 120px 15px 0px 0px;
color:#161514;
font-family:helvetica, sans-serif, Arial;
font-size: 13px;
background: #f4f4f4;
width: 270px;
height: 100%;
float: right;
}
I'm using Chrome
This should work (if that's what you're really trying to achieve):
#element_right {
padding: 120px 35px 0px 0px;
color: #161514;
font-family: helvetica, sans-serif, Arial;
font-size: 13px;
background: #F4F4F4;
width: 270px;
height: 100%;
float: right;
}
To reach your effect, setting margin is a more suitable way.
Of course, it would be in conflict with the width as your child element with 280px of width break the entire structure.
I suggest you to remove the width in child element and make width effect at #element_right with a 295px of width the same with boxes below.
So the search box's width and horizontal position would exactly be identical to the boxes below besides the border and box shadow.
EDIT: Delete misleading answer.
Just check with opera, and your 15px padding works, you are just filling it with the search bar
The width of the contents of the search div doesn't leave room for padding, Shrink your input to width:190px