I'm having trouble getting an image to repeat in HTML/CSS. I'm very new to this so I might have made a basic mistake but I can't for the life of me figure out what it is.
I've made a div in my index.html
...
<body>
<div class="bakgrund"></div>
</body>
...
And my CSS-file:
.bakgrund {
background-image: url("img/bakgrund.png");
height: 200px;
width: 200px;
}
The image is displayed but only once. What I want to do is for the image to repeat vertically and horizontally. This works perfectly when I define the background image in the body tag and not as a div, is it possible?
If your background image size large than div size please set the background size like this.
.bakgrund {
background-image: url("https://www.w3schools.com/cssref/paper.gif");
background-repeat: repeat;
height: 200px;
width: 200px;
background-size: 20px 20px;
}
<body>
<div class="bakgrund"></div>
</body>
The default value of background-repeat is already repeating but if if you need to repeat the background image by css in ...?
try this
.bakgrund {
background: url("img/bakgrund.png") repeat;
height: 200px;
width: 200px;
}
Add this line to your CSS file
background-repeat: repeat;
Related
(Beginner question)
Hello, I'm trying to create a site that has one long image as a background that you can scroll. Nothing fancy, just one image of 1920x3740 of which you can only see a viewport-sized section of. I added an image to clarify what I mean.
I've tried using multiple divs under each other of 1920x1080, and chopped the image up to fit correctly, which kind of worked, but they wouldn't stay 16x9 so the edges of each image didn't match up. Now what i've got is one big image but I can't scroll it.
HTML:
<div class="bgImageFull"></div>
CSS:
.bgImageFull{
background-image: url(../images/LandingPage/NEW_TAHIN_IMAGE_FULL.jpg);
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
This also goes before but I don't think it does anything for my issue:
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html, body{
height: 100%;
font-family: 'functionPro';
}
.bgImageFull {
background-image: url(../images/LandingPage/NEW_TAHIN_IMAGE_FULL.jpg);
height: 3740px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
Height: 100%; Could be what's messing this up for you.
It might be better to specify the actual height of your image in the image's class. 100% is just going to cover the available height of the parent element.
I'm trying to use this image as part of the navigation bar, but the problem is there are big white spaces around the image and I cant remove it. I've tried setting the margin and padding to 0, it doesn't work.
This is what it looks like:
UPDATE: HTML & CSS CODE
HTML
CSS
2ND UPDATE
I finally solved the problem guys.. thank you to everyone who helped!
you could try to crop the image. Otherwise you can make use of CSS.
For example:
<style>
img {
position: absolute;
clip: rect(0px,60px,250px,10px);
}
</style>
You could use CSS and play around with the background-size & background-position properties, like this:
div.image {
width: 100px;
height: 100px;
background-image: url('https://i.stack.imgur.com/sOO9j.png');
background-size: 700px 700px;
background-position: 419px 438px;
border: 1px solid red;
}
<div class="image"></div>
Using the Gimp Image Editor I have cropped your original image and used that as the background instead, this is what it looks like:
div.image {
width: 100px;
height: 100px;
background-image: url('https://i.stack.imgur.com/MaYMF.png');
background-size: 120%;
background-position: 112px 115px;
border: 1px solid red;
}
<div class="image"></div>
The image you provided above is way too large, meaning that when you crop it the cropped image will be a low quality image. I'm sure it would be far easier and if you used a software like Gimp Image Editor or Photoshop to modify your image your self to get the specific image you wanted down to the pixel and you could simplify the my CSS to get this:
div.image {
width: 100px;
height: 100px;
background-image: url('https://i.stack.imgur.com/sOO9j.png');
background-size: 100% 100%;
background-position: center center;
border: 1px solid red;
}
NOTE: the red border is used to help you better see where the image is.
NOTE: the red border is not required to make this work.
My college asked me to code a site for a project but make it responsive. The image i'm using for the header background is not resizing.
This is the code for the HTML
<div id="headerbackground"></div>
And for the style i've put
#headerbackground {
background-image: url('../images/header.png');
background-size: contain;
max-width:100%;
max-height: 100%;
}
I've followed a few tutorials but no luck
You can't set an empty div background until you set a height on that. Or you have some content inside that div. So all you need to set the height of the div.
So here is your responsive background image. You can check responsiveness resizing the window.
body {
margin: 0;
}
#headerbackground {
background: url('http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg');
background-size:100% 100%;
background-repeat: no-repeat;
height: 100vh;
}
<div id="headerbackground"></div>
First, you haven't specified a minimum height, only a maximum, so it's collapsing to 0.
Second, you probably want to use background-size:cover; - that resizes the image to cover the whole element. Contain resizes the image so that the whole thing only fits within the element.
html,
body {
height: 100%;
}
#headerbackground {
background-image: url('https://placekitten.com/g/800/600');
background-size: cover;
background-repeat: no-repeat;
max-width: 100%;
min-height: 100%;
}
<div id="headerbackground"></div>
I am trying to create an full width image above my nav bar, but I cant even get the image to show on screen. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
And the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 100%;
}
I see the jpg made it to my browser and can click on it in my resources, so there is no problem with the path. The screen is still blank and showing nothing. Any help would be awesome.
This is because height:100% is functionally useless, and your div resultingly has no height.
If you give the div a fixed height, the image should appear as expected.
Alternatively if you want the background image to apply to the background of the page, you can apply it to the <html> element and avoid the whole wrapper, 100% debacle.
html {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
http://jsfiddle.net/dolours/JcxLm/2/ Give a specific height, Height 100% is meaningless
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 50px;
}
try this <div class="wrapper"></div>
It is possible that the image isn't showing because there is no content within the div and therefore it's size is 0. Try setting the width and height to a set size, something like 200px to test out this theory. Also I would change your code to:
<div class="wrapper"> </div>
you can use css for body tag, the css of body will be like this:
body{
background: url(../assets/bridge.jpg) center top no-repeat;
}
i think it will work for you, if you want just background image.
Say, like in this example here: http://www.electrictoolbox.com/examples/wide-background-image.html
When I do it, I end up getting white borders around the image no matter what I do. What am I doing wrong?
If you're hoping to use background-image: url(...);, I don't think you can. However, if you want to play with layering, you can do something like this:
<img class="bg" src="..." />
And then some CSS:
.bg
{
width: 100%;
z-index: 0;
}
You can now layer content above the stretched image by playing with z-indexes and such. One quick note, the image can't be contained in any other elements for the width: 100%; to apply to the whole page.
Here's a quick demo if you can't rely on background-size: http://jsfiddle.net/bB3Uc/
Background images, ideally, are always done with CSS. All other images are done with html. This will span the whole background of your site.
body {
background: url('../images/cat.ong');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
You set the CSS to :
#elementID {
background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) center no-repeat;
height: 200px;
}
It centers the image, but does not scale it.
FIDDLE
In newer browsers you can use the background-size property and do:
#elementID {
height: 200px;
width: 100%;
background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) no-repeat;
background-size: 100% 100%;
}
FIDDLE
Other than that, a regular image is one way to do it, but then it's not really a background image.
the problem is the margin of body his default value is margin: 8px
and i make it margin : 0 so the image stretching and there is no white places