I am in the process of designing a web page and I'm using the following CSS to create the page header with the main header image centered in a 1000px width page, and for a repeating edge image going across the top of the body and underneath the header to spread across the whole browser page width.
body {
font-family: Tahoma;
background-color: #0184AE;
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
margin: 0;
position: relative;
}
.whole-page {
width: 1000px;
margin: auto;
padding: 0;
text-align: left;
position: relative;
border-radius: 0 0 15px 15px;
}
.header {
width: 100%;
height: 120px;
color: white;
background-image: url('/images/header.jpg');
background-repeat: no-repeat;
font-size: 10pt;
margin-top: 0px;
margin-bottom: 0;
padding-top: 10px;
border: 1px black none;
position: relative;
}
The CSS above works, except when a toolbar appears. I'm using Chrome with a SEO toolbar and it displaces the centered header image correctly, it pushes it down underneath the toolbar so I can see the whole image.
However, the repeated body image is not displaced at all and the toolbar covers the top so many pixels. This puts the whole thing out of whack.
I've tried a few options in the CSS, but so far nothing seems to work. I'm guessing here, but I think the toolbar draws itself using CSS that 'exists' under the body tag.
Can anyone suggest anything, I'd like either the whole header pushed down, or not. Just so it's consistent.
Using the Chrome developer tools (hit f12) you can inspect (click the magnifying glass icon on the bottom) the toolbar element. Doing this you can see that it is indeed inserted to the body of document. This will unfortunately result in the actual behavior you are seeing. In other words, this is not your fault but the fault of the toolbar developers.
One (ugly) work around is to throw an additional div around your content and apply the background to that.
E.G.
HTML
<body>
<div id="notBody">
<!--Rest of your headers, content, etc here -->
</div>
</body>
CSS
body {
font-family: Tahoma;
background-color: #0184AE;
margin: 0;
position: relative;
}
#notBody {
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
}
in your header class change to position: absolute; and use top to set how many pixels you want your header to be from the top of the page.
.header {
position: absolute;
/* all your other styles */
top: 200px;
}
Related
I am coding my website on CargoCollective. I wanted the home page to have a different background image than the rest, to be precise I wanted it to have a full-scale GIF, while the other pages should only have a background color. I did find the CSS code for the full-scale background, but the problem is that when I go first to the homepage and then to the other pages through the links of the sidebar, the background image remains, instead of turning to background-color. The weird fact is that whenever I refresh the pages or directly go to them (without passing from the homepage), that background image doesn't show up and it is the color I chose. What is the problem?
body {
background-color:#ffe0e0!important;
color: #f54a63;
font-family: sans-serif;
font-size: 14px;
text-align: left;
line-height: 2;
position: relative;
top: -40px;
width: 100%;
}
body.home {
background: url(payload498.cargocollective.com/1/22/724019/12271389/gif14.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body.pages {
background-color: #ffe0e0!important;
}
One way is to simply add the code inline on your home page:
<body style="url(background:url(myGif.gif) no-repeat 0 0;background-size: cover;"/>
A second way is to overwrite the css with javascript/jQuery when you load your home page:
$('body').css({'background-image': 'url(myGif.gif)', 'background-size':'cover'});
A third way is to simply add a full screen div with the background attached:
html,body{height:100%;padding:0;margin:0;}
body{
background:#000;
}
#coverDiv{
height:100%;
width:100%;
background:url(https://media.giphy.com/media/9fbYYzdf6BbQA/giphy.gif);
background-size:cover;
}
<div id="coverDiv">
This div goes on my home page only.
</div>
Try adding this class to your style sheet. It will cover the case where you're navigating from your home page to another page. The rule for css is that the most specific class/selector wins in priority, the problem you were having is that body is more generic than body.home also it needs to be the same attribute, so background instead of background-color.
body.home.open {
background: #ffe0e0;
color: #f54a63;
font-family: sans-serif;
font-size: 14px;
text-align: left;
line-height: 2;
position: relative;
top: -40px;
width: 100%;
}
If I have a #print stylesheet set up with 60mm margins, is it possible to have a logo appear with position: fixed; at 20mm from the top of the page? Thus far it appears that everything outside of the #page margins gets cropped.
It’s difficult to actually see the issue in the code snippet below, but check it out here: https://jsbin.com/xaxanamihu/edit?html,css,output
And the pure output here: https://output.jsbin.com/xaxanamihu
View the print preview of that page. You’ll see the .logo div is cropped because its position is technically outside of the view area set by #page margins.
I basically need to mimic the concept of a header and footer in my print styles from, say, an Apple Pages or Word document. The same logo in the header and small text in the footer on every page, with the content area given plenty of margin for the header and footer.
.logo {
background: rgb(200, 200, 200);
color: white;
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100px;
}
#page {
size: auto;
margin: 60mm;
}
#media print {
.logo {
background: black;
left: -50px;
top: -50px;
}
}
<div class="logo">Logo.</div>
I am having trouble with my container div, which you will see below. It contains a very simple graphic that repeats vertically. I want the background image to expand with the content, however it is not doing so. When I expand my browser window, the background image expands to fill the page vertically, as it should...but when I scroll, the lower portion of the background that was initially below the fold, is empty when I scroll down.
I've also included the html,body as I am not sure where the problem is.
CLICK HERE TO SEE THE PAGE I AM HAVING TROUBLE WITH
Thank you!!!
html,body {
background-color: #999;
background-image: url(../images/bg.jpg);
background-position: top;
background-repeat: repeat;
color: #fff;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
height: 100%;
line-height: 18px;
margin: 0;
padding: 0;
}
#container {
background-color: #000;
background-image: url(../images/bg_container.gif);
background-position: left top;
background-repeat: repeat-y;
display: block;
height: 100%;
margin: 0 auto;
max-width: 1200px;
min-width: 860px;
padding: 0 3px 0 3px;
position: relative;
}
The problem here is you are using position:absolute on the div id="triathlete" then your main container doesn't take in care the space of that element. The solution you can try is this:
In your html change the order between two elements, you have:
<div id="triathlete"></div>
<div id="mainBody"></div>
Change those elements like this :
<div id="mainBody"></div>
<div id="triathlete"></div>
Then remove the position:absolute :
#triathlete {
background-image: url(../images/image_triathlete.png);
background-position: top;
background-repeat: no-repeat;
display: block;
left: 3px;
margin: 0;
padding: 87px 30px 0 30px;
/*position: absolute; Remove this
top: 363px;*/
width: 150px;
z-index: 3;
}
And change the height for the container to min :
#container {
min-height:100%;
}
The Demo
If this doesn't work (for any reason), or you feel like implementing it gives you too much or a headache, here is a quick and dirty fix using jQuery:
setInterval(function() {
$("#container").css("height",$(document).height());
},50);
This will automatically resize your container div to envelop all of it's contents, even if they are absolutely positioned.
Noting again, this is not the proper way to solve a problem like this, but might help you if you don't have time to do it the right way.
We've got a sticky footer that is working great in anything WebKit based but doesn't seem to work in Firefox (Or new versions of IE either).
There is extra space being generated below the footer of around 200px in height that is inheriting the background colour of body.
The extra space does not seem to be part of any div that we can find, including html, body, content, wrapper etc. etc. It also does not seem to be caused by any sort of padding or margins on any elements.
We've built it on Ryan Fait's CSS Sticky Footer method that uses a push div inside of the wrapper div, with a separate footer div.
You can check it out at redesign.treepuncher.com/freetrial/
Iframe at the bottom of your page and copyright is creating unnecessary space. You can stop iframe from being displayed if that does not affect your website's functionality.
Try this code:
.copy {
color: #FFFFFF;
float: right;
font-weight: 100 !important;
margin: 95px 15px 0 15px; //Fixes margin at the bottom of this div
}
iframe {
display: none; //Stops iframe from being displayed
}
The following css should make it sticky and remove unnecessary space at bottom
.footer {
background-color: #006837;
bottom: 0;
color: #FFFFFF;
font-family: "roboto",sans-serif;
font-size: 12px;
font-weight: 100;
height: 120px;
position: fixed;
width: 100%;
}
.wrapper {
height: auto !important;
margin: 0 auto;
min-height: 100%;
}
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);
}