I am trying to set the background image for a div. But it aint seem to be loading..
html
<div class="cover"></div>
css
.cover
{
background-image: url(..images/Section.jpg);
background-size:cover;
height: 100%;
}
jsfiddle-http://jsfiddle.net/bfhzdpg5/
You're missing a forward slash before images by the looks of it.
Related
I'm trying to display html elements (forms, text, etc) on an image, which has been made transparent with gimp. But whatever I tried, the content is hidden by the image.
I've changed the page's background color just to be sure the browser wasn't changing the transparent part to white for some reason, and it does not.
I also have tried to play with the z-index property but this didn't work.
On reloading the page, I can see the text displaying correctly, but then the image displays and overlays it.
#foo{
position: relative;
}
#foo img{
width: 20%;
height: 20%;
}
#bar{
position: absolute;
}
<!DOCTYPE html>
<body>
<div id='foo'>
<img src='my_img' />
<div id='bar'>
<!--This is where I want to write what will be displayed on the transparent image.-->
</div>
</div>
</body>
I didnt find any similar situations, neither here neither on other websites so any suggestion is welcomed.
Edit: Actually I set the top and left CSS properties and it's now working fine.
Have you considered background-image?
#bar {
background-image: url('/path/to/myimg.jpg');
background-size: contain;
background-position: center center;
}
New at Bootstrap. I'm having a problem setting my background image to follow the header image.
The header section has it's own full-screen background, which I then want to be followed by a tiled background image.
I tried:
<div class="header">...</div>
<div class="main-body">
<div class="container">...</div>
<div class="container">...</div>
...
</div>
<div class="footer">...</div>
with the following stylesheet:
.main-body {
text-align: center;
background: url(../img/setttings-bg-black.jpg) no-repeat center center;
background-size: 1024;
background-color: #000000;
}
.header {
text-align: center;
color: #000000;
background: url(../img/promo-bg.jpg) no-repeat center center;
background-size: cover;
}
The problem is that the main-body background's top is hidden by the bottom part of the header body.
What am I doing wrong?
Verify this link or link
have a solution for you.
problem 1)
What I did is I added a <img> below the first div (so the div with the class intro). The img has a clas of bg.
Than add this css:
.bg{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
here you have a working fiddle. I added a lot of <br> tags to show you it works.
You can also try to set the background image height:100% and width:auto;. If you do this the image won't be so crammed together on some screens.
problem 2)
I Gave every slide a class slide1. I also added to all the slide classes position:relative;. Taka a look at this fiddle.
i hope your question is now anwsered. If you have other problems, feel free to ask.
Am new to html. I went through similar questions but none solved my problem. Can anyone help. Thanks in advance.
The File location is correct.
My code:
<div id="bg">
</div>
Css:
#bg{
background-image: url("bg.png");
}
Try this:
For demonstration i used 500px x 500px you can go with 100% x 100% too preferable with a container wrapped around the div. You don't need display: block; here in your css because a div already has display block as a standard for most browsers.
#bg{
width:500px;
height:500px;
background-image: url('bg.png');
}
Also be sure that the width and height matches the width and height of your image.
Your map with your files should be looking something like this:
index.html
bg.png
mycss.css
... many other .html / .php / .css
If you want to use a container, your css would look something like this. Try using container if you're going to work more with css, it's a really good thing too use for different browser sizes.
#bg{
width: 100%;
height: 100%;
}
.container{
width: 500px;
height: 500px;
}
And your HTML
<div class="container">
<div id="bg"></div>
</div>
The path is wrong, check my comment under the question. The Image should be in the same place as the css or the path should be url('../bg.png'); if it is up one level etc.... try this and if it comes p red the path is wrong
#bg {
background: #ff0000 url("bg.png") no-repeat right top;
}
As you are setting the background-image of a div that div must contain something. And the background-image will sized accordingly with the size of the element contained inside the div.
Try this,
#bg{
background: url("http://www.mascotdesign.com/_dev/images/famous-cartoon-character-mickey-mouse.png");
background-size : 100% 100%;
background-repeat : no-repeat;
}
jsFiddle
I'm working on [this website][1]. I have a "mainbackground" which is shown on it.
Is it possible to make [this picture][2] continue when you scroll?
Here's my CSS:
background-image: url("bakgrund.jpg")
I'm having a little difficulty figuring out exactly how you envision this working.
If you want the background image to continue down the page as far as the content goes, use:
background-repeat: repeat-y;
If you want multiple images as the background, use:
background-image: url(image-url-1), url(image-url-2);
If you want the image to scroll with the text (i.e., not fixed) but then continue scrolling once you reach the end of the content, or if you want to dynamically load in multiple images as the need arises, you would need to do it programmatically using AJAX or something.
You can use:
background-attachment: fixed;
If you are trying for a fixed background try this http://jsfiddle.net/kkmLpqqd/
<div id="a">a</div>
#a{
width:300px;
height:2000px;
background-image:url(http://placekitten.com/300/301);
background-attachment:fixed;
background-repeat:no-repeat;
background-color:green;
}
.class-name {
background:url(your-image.jpg) no-repeat;
background-attachment: fixed;
}
http://davidwalsh.name/css-fixed-position-background-image
Try assigning the background image to the "body" element in the CSS, and then put all of the content you need to scroll in a "container" div, with a white background (or whatever you'd like).
css:
body {
width: 100%;
background-image: ...
background-attachment: fixed;
}
#container {
margin: 0 auto;
background: #FFF;
}
html:
<body>
<div id="container>
...
</div>
</body>
I already have a backround and what Im trying to do is put a white block on it and text/images inside, like here - http://dzconstructions.co.uk
thanks
Much better to avoid inline styles and place the following in a separate style sheet...
body {
background-image:url(/background-image.png);
}
div {
width:500px;
height: 200px;
background-color: white;
}
div's should help you to realize this. Just put the background upon the body and insert a div with background-color white. You may then insert the content/images into this div.
example:
<body style="background-image:url(/background-image.gif)">
<div style="width:500px; height: 200px;">
YOUR CONTENT AND IMAGES HERE
</div>
</body>
Use CSS to put background
body {
background: transparent url("Images/Background.png");
height: 100%;
width: 100%;
}
Then use Divs to add white block on it