I'm probably being idiotic here. I've been trying to get a jpeg image to load in the background of a section element as part of a bootstrap course I'm doing (pretty new to this web dev stuff). The image is loading fine in the firefox inspector - it shows no errors and displays the image if I hover over the link - but it just isn't displaying on the page.
Here's the relevant code:
<secton id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-sm-10 sm-offset-1"></div>
<h1>Generic website title</h1>
</div>
</div>
</secton>
css:
#cover{
background: url("Assets/Photos/Blanket.jpg") center center no-repeat;
background-size: cover;
text-align: center;
height: 100%;
}
The path and name of the image is definitely correct, so it's not that.
Any ideas?
Fixed it! As expected, immediately after posting.
Apparently setting the height to 100% was the issue. Changing it to 100vmin made all the difference.
Baby steps...
Related
I know this question must sound familiar, and I can see loads of people asking similar questions but none of the answers are working for me. Everyone has a fairly specific need. I want to understand the basics and I can work out the rest.
I have a simple angular/bootstrap web page. I have made a carousel component and I want to ensure the user always sees the entire image. I have seen lots of answers which suggest img-fluid, max-with, max-height etc., but nothing's working for me. It's sort-of working for landscape images but not for portrait images. I need it to always show the whole image regardless.
Here is the basic app component:
<app-nav-menu ></app-nav-menu>
<div style="padding:10px">
<router-outlet></router-outlet>
</div>
The router-outlet goes to this "about-us" component:
<div class="row">
<div class="col">
<app-carousel [slides]="slides"></app-carousel>
</div>
</div>
And the carousel component looks like this:
<div class="container">
<div class="row">
<div class="col">
<div>
<img [src]="slide.src">
<p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
{{slide.text}}
</p>
</div>
</div>
</div>
</div>
As you can see it's really simple. Right now there is no styling other than the little bit in the p tag which is to center the text in the image. This is not working properly now, because I think I've lost the container whilst trying out different solutions. I don't like CSS because I'm not used to them and I like to see the styles where they belong so I can understand better. But feel free to suggest a CSS solution if necessary.
So the question is simple: how can I make the image always fit the screen and not spill downwards?
Thanks
Did you try the object-fit property?
object-fit: cover;
If your image aspect ration is good, it shows the entire image.
object-fit: contain:
This shows the entire image, but if the aspect ratio is not good, it shows blank spaces around the image.
Thanks SureN.
I tried both of these but they didn't work. Perhaps they would do if I knew how to use them better.
In the end the following more or less worked for me, in the img tag:
style="max-width: 100%; max-height: 100vh; display: block; margin-left: auto; margin-right: auto;"
It's not perfect but it'll do for now!
I'm having a problem with the main baner image on my website.test website click here use right click inspect element then check the "toggle device toolbar" or use ctrl+shift+m ....
as you will see the main image is repeating itself in mobile mode:
the code:
html:
<div class="block-slideshow__slide-image block-slideshow__slide-image--desktop image" style="background-image: url('images/slides/slide-1-full.jpg')"></div>
<div class="block-slideshow__slide-image block-slideshow__slide-image--mobile image" style="background-image: url('images/slides/slide-1-mobile.jpg')"></div>
tried using css adding this class .image and using this
.image{
background-size: cover;
background-repeat:no-repeat;
}
but did not worked, the image looks ugly and blurry... all i want and need is my image is to look like the first image (stretched), but without repeating itself in the background....
if i remove "background-size: cover;" the stretched image appears in the center( this is what i want since i need that small image centered with a white background surrounding it, any factible approach for it?
edit: as i stated above i used this solution:
Prevent Background Repeating
but what i want and need is the image to look centered and small since occuppying
and using background: cover looks very ugly and i dont know how to make the image fit correctly in the mobile screen without looking blurry and ugly!
how can i solve this? thank you!
The problem is not to do with background images repeating.
What has happened is that there is still a full size image in the div just above the start of the mobile-sized slideshow.
See the below code which shows you the position of the div which has an inline style giving it the larger background image.
<div class="owl-item active" style="width: 330px;">
<a class="block-slideshow__slide" href="#">
THE NEXT LINE IS THE PROBLEM. THERE IS A BACKGROUND IMAGE STILL WHICH IS LARGER THAN THE MOBILE SLIDE SHOW'S HEIGHT AND IT IS STILL THERE WHEN YOU GO TO MOBILE SIZING
<div class="block-slideshow__slide-image block-slideshow__slide-image--desktop" style="background-image: url('images/slides/slide-1-full.jpg')"></div>
<div class="block-slideshow__slide-image block-slideshow__slide-image--mobile" style="background-image: url('images/slides/slide-1-mobile.jpg');"></div>
<div class="block-slideshow__slide-content">
<div class="block-slideshow__slide-title">Corporacion Venus C.A</div>
<div class="block-slideshow__slide-text">Rif J-29419176-2</div>
<div class="block-slideshow__slide-button"><span class="btn btn-primary btn-lg">Comprar ahora</span></div>
</div>
I have a masthead background image on my web page that only about 1/3 of the image is within the bounds to be seen on the page.
Is there any way to load just the slice of the image I need instead of the entire image loading? Google's page speed insights says my image is the main reason my home page is taking so long to load the first time around.
CSS:
header.masthead {
position: relative;
background-color: #343a40;
background: url("../images/showcase.jpg") no-repeat center center;
background-size: cover;
padding-top: 8rem;
padding-bottom: 8rem;
}
HTML:
<header class="masthead">
<div class="overlay"></div>
<div class="container">
<div class="row text-center">
<div class="col-xl-9 mx-auto">
<h1 class="text-light" >Lorem</h1>
</div>
<div class="row text-center">
<div class="col-md-12">
<button type="submit" class="btn btn-main">Ipsum</button>
</div>
</div>
</div>
</div>
Is there any way to load just the slice of the image I need instead of the entire image loading?
Short answer: no.
If you're only displaying 1/3 of your image and that applies to all devices, cropping the image is probably your best bet.
If you want to fine-tune further, consider optimizing your image size and using srcset to offer multiple alternatives to the client browser.
Depending on what platform you run your site, there might be a way to stream / send just a part of the image file to the browser, but that might result in browsers reading it as invalid / incomplete.
In other cases, such as css crop or resize, the image is still loaded as whole and Speed Insights see it as such, and will know that it it larger then necessary, or only a part is visible.
What keeps you from cropping the image itself, to keep just the visible part?
I have this whole section here:
<section id="design-centre">
<section id="design-centre-cover">
<div class="container">
<div class="row">
<div class="cover-left">
<h1>Our Designs Make Luxury More Affordable</h1>
</div>
</div>
</div>
</section>
</section>
And here is the CSS:
section#design-centre {
position: relative;
}
background: url(../images/design-center-cover.jpg) center top no-repeat;
height: 800px;
background-attachment: fixed;
}
What I am trying to do is the following:
Have the image scroll when I the user scrolls, here is an example on what I am looking for:
http://www.hush.ca/hush-design-main/#hush-design
I tried using background-attachment: fixed; but that didn't work at all
At the moment, it doesn't seem to be possible without JavaScript. Try some tutorials for example code. The main premise is using either the vanilla JavaScript window.onscroll or the jQuery $(window).scroll() event handlers to detect scrolling of the main page, and reposition the background accordingly.
Also, next time you might want to search SO first for duplicate/similar questions before asking your own question.
I'm using Boostrap and I've set a background image to an empty div using the following markup and CSS:
<section id="process">
<div class="container"> <img src="img/production.png" id="processicon" class="center-block"> </div>
<!--end container-->
<div id="processbg"></div>
<div class="container">
<h2 class="text-center">materials and construction</h2>
<p class="text-center">The carbon neutral and responsibly sourced bamboo contributes to over 70% of the skis construction. The combined strength to weight ratio and consistency enables us to simplify and take a streamline approach to the skis construction.</p>
<p class="text-center">The search for the highest quality materials from around the globe has always been an essential role since day one.</p>
</div>
<!--end container-->
<img src="img/bigski.jpg" class="center-block bigski">
<div class="container text-center">
<h2 class="text-center more">read more</h2>
</div>
<!--end container-->
</section>
<!--end process-->
And:
#processbg {
background: url(../img/process.jpg) no-repeat center 110% fixed;
height: 602px;
background-size: 100%;
}
Everything looks good on desktops and tablets, but when viewed on mobile, the image gets really small and leaves big gaps around it. This makes sense, because the height of the empty div is always 602 px and the photo scales down when the viewport gets smaller. Is there a way to make the image non-responsive or is there some other solution to this?
Here's a link to the actual web page as well: http://skiest.ragne.me/. You can click the PROCESS link in the navigation and it takes you to the mentioned photo.
Thank you for your help.
I think you are looking for background-size: cover; which will:
Scale the background image to be as large as possible so that the
background area is completely covered by the background image. Some
parts of the background image may not be in view within the background
positioning area
source w3schools.com
Change your CSS to the following and see if that works for you.
#processbg {
background: url(../img/process.jpg) no-repeat center 110% fixed;
height: 602px;
background-size: cover;
}
Alternatively you could just remove the background-size declaration and see if that gives you the desired result. The default is auto which should leave the image at its normal size.