So i am currently working on a small assignment we have in school as practice but i don't know how to add a background image behind container. Here is a example i found quickly of what i want to achieve, note the background image http://www.njuskalo.hr. I tried adding a background image to body but that doesn't work either. Also i made two new div tags (.left and .right) to try and add it on the sides of container, also didn't work. Here is my code: http://textuploader.com/d5j5d Also note that i changed and erased a lot of stuff trying other things. And please go easy i know the code is a mess but it's something i am doing at the last minute so feel free to point out all the mistakes.
A background image is done like this:
.container {
background-image: url("../images/backgroundImageLocation.jpg");
}
body{
background-image: url("http://image.flaticon.com/teams/1-freepik.jpg");
background-repeat: repeat;
background-size: 50px;
}
.container {
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
.left {
position: absolute;
left: -100px;
width: 100px;
height: 200px;
background-color: red;
}
.right {
position: absolute;
right: -100px;
width: 100px;
height: 200px;
background-color: green;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With