My background-image is not showing on my div element. Background-color works just fine, but using an image doesn't show.
.scifititle {
width: 50%;
position: absolute;
top: 1080px;
left: 350px;
}
.scifibg {
background-image: url(images/stars.gif);
margin-top: 1200px;
width: 1280;
height: 276px;
}
<div class="scifibg">
<img class="scifititle" src="images/sci-fi-title.png" alt="">
</div>
Your Background image not showing - maybe the image location is wrong. I checked your CSS code, I think you did some wrong CSS.
Please try this HTML & CSS code. I hope it will help you perfactly.
<div class="scifibg">
<img class="scifititle" src="https://lh3.googleusercontent.com/p4M1mK1Lbtc2tt54b6JUQUJ5U8RcwHnEAPH7_87X2NH9Rc8N9ek0Xm2BUq_wmLuOWXlylcDlZFOg4xF3aQtwsyF9frOHoqiQdWVpG-v4VO-Jb_4lIQ" alt="Google Map Mark Icon">
</div>
.scifibg {
width: 100%;
height: 100vh;
padding: 100px 0;
text-align: center;
background-size: auto;
background-repeat: no-repeat;
background-position: center center;
background-image: url(https://i.pinimg.com/originals/31/00/ec/3100ecd92a583cb03dec1f7be1fa0924.png);
}
.scifititle {
max-width: 570px;
display: inline-block;
}
Related
I've ran out of hope for this for the past few days,what I'm basically trying to do is to do this:
CSS:
.div1{
/* background-image code */
}
HTML:
<div class="div1">
<!--Image here-->
</div>
Is it even possible to have a background image larger than the image in the div itself?
See the following example to achieve what you are looking for. Basically you can combine a color and an image by using both the background-color and background-image props at the same time. Position and scale the image with background-size and background-position. background-repeat: no-repeat; is important to be able to see the area that is the simple color background.
.div1 {
background-color: blue;
background-image: url(https://thumbs.dreamstime.com/b/forrest-27720334.jpg);
background-size: 50%;
background-position: center;
background-repeat: no-repeat;
width: 400px;
height: 300px;
}
<div class="div1">
</div>
For two images layered in this way:
.div1 {
background-image: url(https://www.realtree.com/sites/default/files/styles/site_xl/public/content/inserts/2022/imagebybarriebird-ducklings.jpg);
width: 400px;
height: 300px;
position: relative;
color: white;
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
/*to center the text */
display: flex;
align-items: center;
justify-content: center;
}
.div1::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url(https://thumbs.dreamstime.com/b/forrest-27720334.jpg);
background-size: cover;
/*to set this image layer behind the duck one */
z-index: -1;
}
<div class="div1">
Example content text
</div>
you can add width and height in each img and background-image
.div1{
width: 100vw;
height: 500px;
/* background-image code */
}
img {
width : 200px;
height : 200px;
}
<div class="div1">
<img src="code.png" alt="">
<!--Image here-->
</div>
Give the img some padding and put the background image on it.
div {
width: fit-content;
}
img {
background-image: url(https://picsum.photos/id/1015/300/300);
background-size: cover;
padding: 30px;
}
<div>
<img src="https://picsum.photos/id/1016/200/300">
</div>
I am trying to adjust my logo at the center of the webpage, but whenever I adjust it in my CSS file, the background is getting affected by the changes so there will be white spaces on top.
.bgimage {
width: 1903px;
height: 1000px;
background-image: url(https://drive.google.com/uc?id=1ZtitWTmH3qglyS7uv4X32GDQv35fmhwG);
background-attachment: fixed;
background-size: cover;
margin-top: 60px;
display: block;
}
.bgimage .ETLOGO {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
width: 40%;
height: 50%
}
<div class="bgimage">
<img src="https://drive.google.com/uc?id=1vXkFqCQzC7sagYCBOuAwDQMf-uhJTmAo" class="ETLOGO">
</div>
Here is a photo of my website.
I think what you wanted was padding at the top of the logo, instead of margin. Try this:
.bgimage {
background-attachment: fixed;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/0f/MOS6581_chtaube061229.jpg);
background-position: center;
background-size: cover;
height: calc(100vh - 50px);
width: 100vw;
}
.bgimage .ETLOGO {
display: block;
height: 50%;
margin: 0 auto;
padding-top: 40px;
}
<div class="bgimage">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/440px-Intel-logo.svg.png" class="ETLOGO">
</div>
I will wish to get a result like this for example in CSS.
Here is my result for now
How to do to have the same result that the first image?
Here is below my code.
.banner02{
height: 100px;
width: 100%;
position: absolute;
margin: 0px;
}
And my HTLM
<div class="my_banner_reg">
<img class="banner02" src="images/slider.jpg"/>
</div>
Thanks
I don't know what you are written, But add the following styles to your element that have background-image:
header{
width: 100%;
height: 100px;
background-image: url(http://trak.in/wp-content/uploads/2018/01/10-Rupees-Coins.jpg);
background-size: cover;
background-position: center;
}
<header></header>
And another way:
div {
width: 100%;
height: 100px;
overflow: hidden;
}
div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div>
<img src="http://trak.in/wp-content/uploads/2018/01/10-Rupees-Coins.jpg" />
</div>
I want my background image to cove the entire div but instead there are a lot of white space
HTML
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
CSS
.backgroundimg{
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
}
.backgroundsecction{
height: 900px;
width: 100%;
}
Please use background-size:cover
.backgroundimg{
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
background-size:cover;
}
.backgroundsecction{
height: 900px;
width: 100%;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
If the white border bothers you around the background, use something like this:
.backgroundimg {
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
}
.backgroundsecction {
height: 900px;
width: 100%;
}
body {
margin: 0;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
If the image is smaller than the screen, than use larger image. it is generally good practice to prepare that some people could have very very large resolution displays...
Or scale it up, like #ankitapatel mentioned: with background-size:cover;.
Use 2 things as suggested
body {
margin : 0px; //add this
}
.backgroundimg {
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: fixed; //change fixed to cover entire
}
.backgroundsecction{
height: 900px;
width: 100%;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
Currently I'm using this code:
<style type="text/css">
.icondiv{
border:1px solid;
content: url(image.png) 100% 100%;
}
</style>
<div class="icondiv"></div>
The output is like, the image stays in 1/4 of the div. How can I make the image fill the whole? I already checked the image and it has no extra whitespace.
If you don't want to use background image
.container{
width: 400px;
height: 100px;
}
.container img{
width: 100%;
height: auto;
}
#supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
<div class="container">
<img src="http://i62.tinypic.com/2dh8y1g.jpg" alt="" />
</div>
But pay attention to the support: http://caniuse.com/#search=object-fit
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.icondiv {
width: 400px;
height: 100px;
border: 1px solid #f00;
position: relative;
}
.icondiv img {
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
}
<div class="icondiv">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSL19OsbasMqU64_o3uoov5liyKmD8KMStU1OR8hXUtV4pwALr7Sg" alt="" />
</div>
You should use
<div class="container">
<img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
.container {
width: 700px;
height: 400px;
background: #444;
margin: 0 auto;
border: solid black 1px;
}
.container img{
width: 100%;
height: 100%;
}
Fiddle Here
Try this:
.icondiv{
border:1px solid;
background: url(yourimage.png) no-repeat center center;
background-size: cover;
width: 200px; // Adjust your needs
height: 200px; // Adjust your needs
}
You could create some css class like this:
full {
background-image: url(image_path('yourimage.jpg'));
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
It looks like you're trying to add the image into the div using CSS rather than inline in the HTML... I will assume you've got a good reason for this and follow suit. Instead of using "content:" you can drop the image in as a background and make it spread to fill the container.
.container {
width: 700px;
height: 400px;
background:#f00 url(http://i48.tinypic.com/wrltuc.jpg) no-repeat center center;
background-size:cover;
margin: 0 auto;
border: solid black 1px;
}
<div class="container">
</div>
The benefit of using this "background-size:cover" technique is that your image will always fill the containing div regardless of its proportions.