CODEWITHSUNDEEP
htmlcssbackground
myom
myom

Reputation: 135

How to make background image go in the "background" using CSS/HTML

I want to fill my page with a background image and have the text aligned in place with that background. With the below code, the background image loads at the top of the page, and the text goes under it. I know I can use the "background: " function, but the way it is done in my below code allows for automatic resizing, regardless of browser size (i.e., mobile devices have small browser sizes). So, I just want the background image to go behind the text.

<html>
<head>

<title>Title</title>    

<style>

img.bg
{
    min-height: 100%;
    min-width; 781;

    width: 100%;
    height: auto;

    top: 0;
    left: 0;

    z-index: -1;
}

@media screen and (max-width: 781)
{
    img.bg
    {
        left: 50%;
        margin-left: -390.5;
    }
}

#container 
{
    position: relative;
    width: 781;
    margin: 50 px auto;
    height: 758;
    border: 1px solid black
}

#left
{   
    position: relative;
    left: 1.280409731113956%;
    top: 14.51187335092348%;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: 50%;
    height: 50%;
    color: #FFFFFF;
    position: relative;
}   

p
{
    font: 14px Georgia;
}

</style>

</head>

HTML 

<img class="bg" src="background.jpg">

<div id="container">

<div id="left">
    <p>
    Text
    </p>
</div>

</div>

</body>
</html>

Upvotes: 0

Views: 8150

Answers (3)

Ana
Ana

Reputation: 37178

Just use position: fixed for your background image http://dabblet.com/gist/3136606

img.bg {
    min-height: 100%;
    min-width: 781px;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: -1;
}

EDIT (I wish there was a way to make it more visible than this)

OK, after reading the comments for the original question, I understand that the purpose is to have a background that scales nicely for any display sizes.

Unfortunately, quite a lot of mobile devices have a problem with position: fixed - you can read more about this here.

So the best solution in this case is to use a background image, not an img tag, having the background-size set to 100% (which will stretch the image - example), or to cover (which will scale the image such that it completely covers the screen - example)

Upvotes: 2

Igor Konopko
Igor Konopko

Reputation: 764

Well, maybe you can also try that css:

body{
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

it's should cover all youre page even when page size is changed

Upvotes: 1

DOCbrand
DOCbrand

Reputation: 339

Make your BG image have a z-index of 1, and your #container div to have a z-index of 2. Does that work?

img {
  position: relative;
  z-index: 1;
}

#container {
   position: relative;
   z-index: 2;
   top: 0px;
   left: 0px; /*or whatever top/left values you need*/
}

Upvotes: 2

Related Questions