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...:)
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 want to reduce the background of my H1 font using css.
Here is my css file.
.headline h1 {
font-size: 50px;
background: #fff;
background: rgba(255,255,255,0.9);
background-position:
}
i want to achieve this.
Set your h1 to display: inline-block, and it should work!
After that, if you want to center it again, you need to put text-align: center in the parent element.
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
I have the following class
div.application {
background: url(http:/appimages/background.gif) #fff bottom left repeat-x;
height: 20px;
line-height: 10px;
width:80px;
display: block;
text-align:center;
Font-weight:200;
font-size: 10pt;
padding:5px;
}
I use this to build a button like navigation that looks three dimensional.
in all browsers I tested, Chrome, Firefox, IE and different versions this works fine, except for Safari. The image does not appear.
You're missing a "/" in the image url.
Change http:/appimages/background.gif to http://appimages/background.gif and it should work.
The color value (#fff) should also be the first property set in the declaration.
There seems to be two errors in your declaration, the order is wrong and the url is to the image is some sort of mix between absolute and relative.
background: url(http:/appimages/background.gif) #fff bottom left repeat-x;
Should probably be
background: #fff url(appimages/background.gif) repeat-x scroll left bottom;
or if the images is really on another server
background: #fff url(http://www.yourdomain.com/appimages/background.gif) repeat-x scroll left bottom;
Scroll is default and can be omitted..