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.
Related
#dent {
background-image: url(C:\Users\Samuel Oniyilo\Documents\GitHub\hng-wonderwoman-task-1\hngi7-task2-HearthHotels\images\black-rotary-telephone-beside-ball-pen-on-white-printed-47319.jpg);
background-size: 1350px 600px;
background-repeat: no-repeat;
filter: blur(0.2px);
margin-top: 5px;
color: #fff;
text-align: left;
font-weight: 150px;
font-size: large;
font-family: 'Times New Roman';
padding-top : 1px;
}
Please what could be the solution here? I realized the issue is the space between my name "Samuel Oniyilo" in the image.There anything that can represent the space in a css style
Wrap the path in "quotations".
background-image: url("C:\Users\Samuel Oniyilo\Documents\GitHub\hng-wonderwoman-task-1\hngi7-task2-HearthHotels\images\black-rotary-telephone-beside-ball-pen-on-white-printed-47319.jpg");
I want to create the h1 header as an example below. I saw this type of header at some website which I could not remember it's address right now. If I'd remember, I'd copy it from their website. Unfortunally I forgot. Here's the the PSD screen-shot:
(source: hizliresim.com)
Anyway, no matter what I've tried I still could not get the result. What I got is:
(source: hizliresim.com)
Here's my code:
div.big-header div.header-left h1 {
float: left;
color: #fff;
background: #c00000;
font: bold 35px "Open Sans";
padding: 1px 5px;
margin-bottom: 35px;
}
and here's JSFiddle
Question: How can I create the header as example above (first picture)
Try like this: Demo
Updated Demo
Update: Just added display:inline, line-height with box-decoration-break along with your code..
CSS:
h1 {
color: #fff;
background: #c00000;
font: bold 35px sans-serif;
padding: 1px 5px;
margin-bottom: 35px;
/* newly added code */
display:inline;
line-height:44px;
-webkit-box-decoration-break: clone;
-ms-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
Use a span inside your h1:
h1 {
float: left;
color: #fff;
font: bold 35px sans-serif;
padding: 1px 5px;
margin-bottom: 35px;
}
h1 > span {
background: #c00000;
}
And:
<h1><span>How to create a page with PHP?</span></h1>
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)
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%;}
I'm using the following CSS:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
}
h2 span {
position: absolute;
top: 7px;
padding-right: 6px;
background-color: #F9F9EE;
}
When used like:
<h2><span>abc</span></h2>
Gives the following effect:
abc ------------------
The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.
I do remember seeing the same effect being used on a few blogs but the url slips my mind.
Thank you. :)
As Rory mentioned, using position relative on the H2 tag solves the problem without the use of an image.
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
position:relative;
}
h2 span {
position: absolute;
top: -0.8em;
padding-right: 6px;
background-color: #F9F9EE;
}
This works in the three browsers I use for testing (IE, Firefox, and Chrome).
I'm not entirely sure what you're trying to do and what the problem is exactly, but adding position: relative; to the h2 style will create a positioning container in which the span position: absolute; will calculate its values from.
I don't see the effect that you described in Firefox, only in IE6.
One way you could achieve this effect is to use a single pixel background image, tiled horizontally at 50% of the height of the div. It's not as nice, since you do have to use an image, but it should look how you want without affecting the HTML.
I'd suggest something like:
h2 {
font-weight: normal;
font-size: 1.6em;
font-style: italic;
background: url(pixel.png) repeat-x 0% 50%;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}
I've checked it in IE6 and Firefox, using it multiple times on the same page. :)
My favorite way to do this is:
<fieldset class="blah">
<legend>Heading</legend>
content...
</fieldset>
and then add
fieldset.blah {border-top: 1px solid #999;}
in your CSS. Hope that helps.
Try this:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
height: 0.75em;
margin-bottom: 1.85em;
overflow: visible;
font-style: italic;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}