Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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

Bronze 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 :)
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
 
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:
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>
 
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
 
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?
 
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
This is what you need :)
YOU ARE MY SAVIOR! It worked beautifully!
I'll create a new thread in the proper forum where I can share my work as I progress for feedback :)
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom