• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Image Background with HTML

Krygore

Krygore

Coder
Is it possible to post an image as a background for a header using only HTML? Or is CSS absolutely necessary to that styling effect?
 
Solution
Antero360
Krygore said:
It's not that I am trying to avoid CSS, it's that I'm not as familiar with CSS, which I did a BUNCH of research late into the night right now and have a better understanding of it.
But my other question still remains; How do I wrap text to be in front of the image so that it's visible through it instead of under or over the image?
Also, how do I make it so the image fills the width of the screen on any device and keeps it's proportions to the webpage?
Click to expand...
This is what you need :)

How To Position Text Over an Image

www.w3schools.com www.w3schools.com
Sort by date Sort by votes
Antero360

Antero360

Coder
Krygore said:
Is it possible to post an image as a background for a header using only HTML? Or is CSS absolutely necessary to that styling effect?
Click to expand...
HTML is the structural language.. CSS is what give the html its look.. coming back to the name Cascading Style Sheets.. unfortunately, not using css is something that cannot be done
 
Upvote 0 Downvote
Antero360

Antero360

Coder
As far as having an image as a background.. you would need to do something to this effect:

CSS: 
.header
{
    background-image: url("linktoimg.png");
}
 
Last edited by a moderator:
Upvote 0 Downvote
Krygore

Krygore

Coder
Ok, once I have the image on the page, is there a way to wrap the text to the front of the image so my text displays over it?
I found a way to get the image on there, now I just need to get my header in the center of it. I'll post my code as well if that helps...

HTML: 
<header id="skyrim-index-header">
            <h1><img src="images/index_header_background.jpg" height="215"><strong><em>Skyrim Gamer's Guide</em></strong></h1>
            <hr style="height:10px; color:ivory;background-color:ivory">
        </header>
 
Upvote 0 Downvote
Antero360

Antero360

Coder
Krygore said:
Ok, once I have the image on the page, is there a way to wrap the text to the front of the image so my text displays over it?
I found a way to get the image on there, now I just need to get my header in the center of it. I'll post my code as well if that helps...

HTML: 
<header id="skyrim-index-header">
            <h1><img src="images/index_header_background.jpg" height="215"><strong><em>Skyrim Gamer's Guide</em></strong></h1>
            <hr style="height:10px; color:ivory;background-color:ivory">
        </header>
Click to expand...
You would still need css in order to do that.. like we are telling you.. there is no way around it lol
 
Upvote 0 Downvote
Krygore

Krygore

Coder
It's not that I am trying to avoid CSS, it's that I'm not as familiar with CSS, which I did a BUNCH of research late into the night right now and have a better understanding of it.
But my other question still remains; How do I wrap text to be in front of the image so that it's visible through it instead of under or over the image?
Also, how do I make it so the image fills the width of the screen on any device and keeps it's proportions to the webpage?
 
Upvote 0 Downvote
Antero360

Antero360

Coder
Krygore said:
It's not that I am trying to avoid CSS, it's that I'm not as familiar with CSS, which I did a BUNCH of research late into the night right now and have a better understanding of it.
But my other question still remains; How do I wrap text to be in front of the image so that it's visible through it instead of under or over the image?
Also, how do I make it so the image fills the width of the screen on any device and keeps it's proportions to the webpage?
Click to expand...
This is what you need :)

How To Position Text Over an Image

www.w3schools.com www.w3schools.com
 
Upvote 1 Downvote
Solution
Top