I have the following css set up for my page. When the page loads the background color doesn't always take effect. I have to refresh my page once or twice before the color works. Anyone know why? The background-image isn't as tall as the entire page and it's a gradient. So I'm taking the bottom pixel color of the gradient and using that as the page bg color.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
margin: 0px;
padding: 0px;
background-color: #001833;
background-image: url(images/page_bg.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Try:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000;
margin: 0;
padding: 0;
background: #001833 url(images/page_bg.jpg) repeat-x top;
}
(You don't need to specify 'left' if its repeating.)
Also, if you're using CSS reset (or not), make sure your body uses 100% height:
html, body {height: 100%;}
Related
I'm working on a site for my class and I'm having extreme difficulties getting this header's image to show. They are in the same folder and I can get the image to show when applied directly to a specific page. I feel there is something wrong with the way my CSS is coded.
h1
{ background-color: #000033;
background-image: <img src="sunset.jpg" "Height=72px" <alt="Sunset"> ;
color: #FFFFFF;
line-height: 200% ;
font-family: Georgia, serif;
text-indent: ;
text-shadow: ;
margin-bottom: 0 ;}
so i got it to work without realizing it, here is the code i ended with.
h1
{ background-color: #000033;
background-image: url(sunset.jpg) ;
color: #FFFFFF;
line-height: 200% ;
font-family: Georgia, serif;
text-indent: ;
text-shadow: ;
background-position: right;
background-repeat: no-repeat;
height: 60px;
padding-left: 20px;
margin-bottom: 0 ;}
background image is used in css as follows
background-image: url("sunset.jpg");
take a look https://www.w3schools.com/css/css_background.asp
When using CSS, you don’t need to use HTML tags e.g. <img.../> you just use the following:
h1
{ background-color: #000033;
background-image: url(“sunset.jpg");
color: #FFFFFF;
line-height: 200% ;
font-family: Georgia, serif;
text-indent: ;
text-shadow: ;
margin-bottom: 0 ;}
Try this:
background-image: url("sunset.jpg");
You can't use HTML tags inside CSS.
Try this:
background-image:url ('sunset.jpg');
and it will work fine.
I have some body and page settings that are keeping everything nicely centered in my site, which is my objective.
However, I also have some text in the center, which currently is sprawled along the entire width of the page when it's long. Every time I try to set a css width property, like max width, it decides to go haywire with it's positioning, and land itself far left of the center.
I guess there's some issue with my overall page center positioning, and setting any type of width property to a div.
EX of things nicely centered, but sprawling text: https://www.flickr.com/photos/77598212#N03/34191523510/in/dateposted-public/
and when I try to set any sort of width:
https://www.flickr.com/photos/77598212#N03/34191523450/in/dateposted-public/
I'd appreciate any and all thoughts. Thank you. -Wilson
the css:
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:500px;
max-height:340px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
font-size: 18px;
font-family: vendetta, serif;
line-height: 25px;
}
If you have a fixed width on a block element then simply give it margin: 0 auto; to center it.
sorry if this is a question that's been answered before but I've been searching and I can't find a solution that quite fits. I'm trying to get my fixed header to stay in line with the content but can't seem to get it to stay there. Whenever the window is resized the header moves left or right. The way I have it setup now is the only way I've found of getting the header to stay inline with the content at all. Otherwise it just hangs off the left side of the page.
Ideally what I'd like is to just have the header slightly bigger than the rest of the content and stay exactly in line with it no matter the window size, mainly because the logo hangs down.
the live site is here:
andrewillustration.com
Here is the code:
CSS
body{
background-attachment: fixed;
margin: 0px;
font: 400 16px/22px 'PT Sans Narrow', sans-serif;
color: #099;
background-color: #B4BFCD;
background-image: url(images/noisy_grid.png);
}
h1{font: 400 58px/60px 'Open Sans Condensed', sans-serif; color:#F05522; margin-left:65px;}
h2{
font: 400 18px/22px 'Open Sans Condensed', sans-serif;
color: #069;
}
h3{font: 400 14px/16px 'Open Sans Condensed', sans-serif; color:#6a6969;}
ul{margin:0px; padding:0px;}
a {
text-decoration: none;
color: #FFF;
}
a:hover {color:#099;}
a img{border:0px;}
#container{
width: 950px;
margin: 0px auto 300px auto;
Background:url(images/torn_paper_background.png) repeat-y;
overflow: auto;
padding-bottom: 100px;
}
/****************************************************/
/* HEADER */
/****************************************************/
#header{
background-color: #F05522;
width:712px;
height: 115px;
padding: 0px 43px;
position: fixed;
top: 0px;
left:62%;
margin: 0 auto 0 -475px;
}
#header #logo{
position: absolute;
float:left;
left: -157px;
}
#header #main-menu{float:right; padding-top:45px;}
#header #main-menu li{
float:left;
list-style:none;
margin-left:27px;
font: 400 16px/20px 'Open Sans Condensed', sans-serif;
color: #FFF;
}
HTML
<div id="header">
<div id="logo"><img src="images/logo-corners.png"></div>
<ul id="main-menu">
<li>Portfolio</li>
<li>About</li>
<!--<li>Experience</li> -->
<li>Contact</li>
</ul>
</div>
The way I'd do it would be to add a fixed-position wrapper around the header (with a width of 100%). You could then give the header a fixed width to match your content, and give it a margin of 0 auto to get it centred. Float your logo to the left, and apply the background-color to the menu ul (which is floated right), setting margins and paddings as required so that it takes up the remainder of the available space.
You'd need to add a bit of padding to your topmost content div to stop it being hidden by the menu, though.
Im trying to get the links in my footer white #fff however I want to keep the rest of the links on my page the color they already are. How would I do this?
#footer {
background: #3b5998;
color: #fff;
font: 11px/14px Lucida Grande, Lucida, Verdana, sans-serif;
padding: 5px 20px;
}
Perhaps you should add a class to each anchor element within your footer instead of applying the colour to the footer itself:
/*Select only footer tagged elements*/
.footerLink
{
color:#fff;
}
In addition to your original CSS, the following will make your footer links white:
#footer a {
color: #FFF;
}
#footer a {
background: #3b5998;
color: #fff;
font: 11px/14px Lucida Grande, Lucida, Verdana, sans-serif;
padding: 5px 20px;
}
This will style only the a elements in the div (presumably) with the id of footer.
On this page I'm trying to position quote images around the block quote but they won't sit right.
This is the CSS:
blockquote {
padding-left:10px;
color:#444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
blockquote p {
padding: 0 100px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
I want to keep the images the same size ideally. I just want to make the text stop overlapping the images. I tried specifying the width of the .blockquote as 500px but it didn't seem to make any difference.
Any ideas would be welcomed. Thanks - Tara
Two things:
In order to see the images behind
the text you should not specify a
background color for the inner paragraph; make
it transparent instead.
The specified padding is not applied due to another property (.entry p) which is more specific. You could set this blockquote padding to !important but that's generally not recommended, another option is to make this one more specific than the other (.entry p) by adding the .entry class. Be aware that only blockquotes with a parent .entry class will be selected this way. (more info about specificity)
The css:
blockquote {
padding-left: 10px;
color: #444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
.entry blockquote p {
padding: 0 100px;
background: transparent url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
Try adding this property:
.entry p {
margin: 5px 5px 5px 15px;
padding: 0px 40px 0px 0px;
line-height: 20px;
font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
font-size: 13px;
}
I managed to get the following:
Hope that helped (:
Depending on the browser support that you need, you can try it without images, using CSS:
blockquote {
padding: 0;
margin: 0;
border: 1px solid blueviolet;
}
blockquote:after,
blockquote:before {
color: #ccc;
font-size: 4em;
line-height: 0;
height: 0;
vertical-align: -0.5em;
display: inline-block;
}
blockquote:after {
content: "”";
margin-left: 0.05em;
}
blockquote:before {
content: "“";
margin-right: 0.05em;
margin-bottom: -0.5em;
}
Live example here
(Tested on Firefox and Chrome only)