.navigation-card{
background-image: url("https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png");
background-repeat: no-repeat;
background-position: center;
height: 1000px;
width: 700px;
}
<html>
<head>
<title>Webpage Components</title>
<link rel="stylesheet" type="text/css" href="./Styles/main.css">
</head>
<body>
<div class="navigation-card">
</div>
</body>
</html>
It should show an image but its not. The code works when I use a web link like above for the image but it doesn't work when I give a path of a local file on my computer.
You are usign image as background but you are not setting the background size, You just are setting the container size, so you have to add the next rule to your css class:
background-size: contain;
or
background-size: 700px 1000px;
From: https://www.w3schools.com/cssref/css3_pr_background-size.asp
"contain" -> Resize the background image to make sure the image is fully visible
The reason is it not centered is because you have set the width of the container to only 300px. The image is taking up that full width. If you removed the width from navigation card, it will be centered.
Alternatively, you can add the following style to the card and it will center.
margin: 0 auto;
So you'll end up with this
.navigation-card {
background-image: url("https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png");
background-repeat: no-repeat;
background-position: center;
height: 300px;
width: 300px;
margin: 0 auto;
}
to center a background image you shoud add margin: 50% auto; that make the image in the center of the page or margin: 0 auto; to make it in the top
Related
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;
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 want my jumbotron background to automatically adjust its height to the screen resolution. At the same time, the width of the image would change only with the same ratio as height, and the rest of width would be hidden.
For example I have this image:
And it shows only part of its height and width.
<div id="j-ricardo" class="jumbotron">
<div class="container">
<h1>David Ricardo</h1>
<p>Najbogatszy ekonomista w historii</p>
</div>
</div>
<style type="text/css">
#j-ricardo {
background-image: url("obrazki/ricardo.jpg");
background-size: 100% auto;
height: 15%;
color: white;
text-align: center;
}
</style>
Background-size: contain; doesn't work like this (the image repeats itself). I want to use HTML and CSS only, no jQuery.
Use contain with background-repeat: no-repeat;
I need your help with a site i'm putting together. I'm a noob and have been given a design that has the body with designed to 900px wide but they have given me an image that is 1200px wide. They want the image to span the full 1200px wide, so essentially there will be 300px overlap on either side of the page. I can't quite figure out how to do this, any help would be appreciated!
Thanks,
Dave
Your best bet to accomplish what they want is to make the image a background-image in CSS.
Set up a div that will contain the image (as a background), and position it on the page relative to where you want it to be.
<div class="background"></div>`
Either fill the div with content to give it a height or define a fixed height, say 400px.
<style>
.background {
height: 400px;
width: 100%;
}
</style>
Now, set the background properties to achieve what you want.
<style>
.background {
height: 400px;
width: 100%;
background-repeat: no-repeat;
background-image: url(URL_TO_IMG);
background-position: center center;
background-size: cover;
}
</style>
JSFiddle example here:
jsfiddle
You can use this code:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
to cover the exact space you have.
body{
background: #ccc url(image_folder/image_name.extension) np-repeat 0 0 center;
}
#otherelement{
/*Style Your Page Whatever you want...*/
}
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.