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>
Related
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.
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.
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 a responsive website and I'm having an annoying problem. In my header is some text. And I set it offscreen with text-indent -9999px. After that I load a background image. But I want only the background image to be clickable. I don't know how to do this. I've found a few examples on google. But they never "inject" a picture with css. They always define the picture in the html.
So all that I want is a picture horizontally centered in the header and only the picture is clickable, not the margin around it.
<header>
<a href="alink">
<h1>this is gonna be replaced with an image(on desktop websites). It will stay here on mobile website</h1></a>
</header>
and the css:
header h1 {
margin:10px 0 30px 0;
text-indent:-9999px;
background-image: url('pika.png');
background-repeat: no-repeat;
background-size: contain;
background-position:50% 50%;
width:100%;
height:220px;
border:1px solid red;
float: left;
}
I've also uploaded the code to jsfiddle:
http://jsfiddle.net/Cm3yQ/
As you can see, currently the whole h1 is clickable, and I want only the picture to be clickable.
<edit>
Possibilities to have only image clikable are:
the use of img + map + area
or the use of SVG. one random tutorial : http://tutorials.jenkov.com/svg/a-element.html
Average example of what can be done : DEMO
</edit>
You should wrap link inside h1, and give it a display:block.
header {
background:url(http://lorempixel.com/400/150);
/* background could either be on h1 or a */
background-size:cover;/* optionnal */
}
header, h1 , h1 a {/* size them all at once */
display:block;
height:300px;
}
a {
text-indent:-9999px;/* hide text from screen */
/* still not working ? set background here or give it a color
almost transparent so it can catch click event :
background:rgba(0,0,0,0.001);*/
}
and HTML :
<header>
<h1>
SOME text
</h1>
</header>
it may look like a comment but i dont have enough reputations to put comment ,hence am putting it as an answer.
Why dont you create another div in the html and put your image inside it ,then style it accordingly.
HTML
<header>
<div class="headerDiv">
<h1>this is gonna be replaced with an image(on desktop website). It will stay here on mobile website</h1>
</div>
</header>
Css
.headerDiv{
border:1px solid red;
height:220px;
width:100%;
}
header h1 {
margin:10px 0 30px 0;
text-indent:-9999px;
background-image: url('http://img3.wikia.nocookie.net/__cb20120630141813/sims/images/d/d7/Pichu.gif');
background-repeat: no-repeat;
background-size: contain;
background-position:center;
height:220px;
// float: left; Get Rid of float: left
}
I have a div that I am giving a width of 60% to.
CSS
#image {
float:left;
width:60%;
background-image:url('cleaning.jpg');
}
HTML
<div id="image">
<img src="cleaning.jpg" />
</div>
My issue is that the image is being displayed at full size across the entire page!
How do I restrict it to the div it is being enclosed in?
Thanks!
As others have mentioned, you appear to be using two competing techniques - you've got a background-image on the container div, but you've also got the same image contained by the container div. Pick One.
For the background-image technique, you probably want to use something like:
#image {
width: 60%;
background:url('cleaning.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The likelihood is that you need to manage the overflow of the element.
Try the following:
#image {
float:left;
width:60%;
background-image:url('cleaning.jpg') no-repeat;
overflow:hidden;
}
The issue you are having is that you set the parent div to have a width of 60%. You did not give the specific image element for that div a specific width. I hope this helped, I'm not 100% sure that I am correct but that is what this site is for, a question and answer format to help you work your bugs out. The issue how I see it is that you are setting the width of the specific div, and adding a background image to it which would not require you to set a <img></img> element. So in reality you have two copies of the image in the same spot, one which is 60% width, the second full size image covers the other. You must set the <img></img> element's width.
CSS:
#image {
float: left;
width: 60%;
/* No need for a background image to be set if you're using <img></img> */
}
#image img {
width: 100%;
}
Im not sure why you have a background image and a normal image. Background images will never scale with the container. I think your problem however is you need to set your image width as well. try
CSS
#image {
float:left;
width:60%;
background-image:url('cleaning.jpg');
}
#image img {
width:100%;
}
HTML
<div id="image">
<img src="cleaning.jpg" />
</div>
Example with http://jsfiddle.net/f5Ls3/
Example without http://jsfiddle.net/f5Ls3/1/