• 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

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
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?
This is what you need :)

Antero360

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?
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
 

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:

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>
 

Antero360

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>
You would still need css in order to do that.. like we are telling you.. there is no way around it lol
 

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?
 

Antero360

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?
This is what you need :)
 
Solution
Top