Making background image not-resizable - html

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.

Related

background-image on container element doesn't show all the sections of the container

I am new to CSS and learning everyday. I am stuck at understanding something which could be trivial but I am not sure about the right term to research the problem.
So, I have a container <main> with class "background" inside which there are three sections with class "package" followed by the footer. The sections inside the container are tall enough needing the reader to scroll down to view them all:
</header>
<main class="background">
<section class="package" id="plus">
<a href="#">
<h1 class="package__title">Our PLUS Plan</h1>
<h2 class="package__subtitle">The most popular choice of our customers.</h2>
<p class="package__info">Benefit from increased storage and faster support to ensure that your mission-critical data and applications
are always available!</p>
</a>
</section>
<section class="package" id="free">
<a href="#">
<h1 class="package__title">Our FREE Plan</h1>
<h2 class="package__subtitle">An extremely solid start into our hosting world.</h2>
<p class="package__info">Get started immediately at zero cost!</p>
</a>
</section>
<div class="clearfix"></div>
<section class="package" id="premium">
<a href="#">
<h1 class="package__title">Our PREMIUM Plan</h1>
<h2 class="package__subtitle">All your enterprise needs. Instant support, guaranteed uptime. </h2>
<p class="package__info">The best solution for small to large enterprises. Because hosting shouldn't be in the way!</p>
</a>
</section>
</main>
<footer class="main-footer"> ....
It looks like:
I wanted a background image to cover the entire page so that it lays behind all the section till when the footer starts. I thought, I could target <main class= "background"> and tried:
<style>
.background {
background-image: url("../images/plans-background.jpg") ;
}
But this doesn't show the last section onwards in the page (even though <main> contains three sections) and the scrollbar disappears.
What is the reason behind this behaviour? I assumed this was happening because of the inherent height of the image so to test it out I created a very tall image (with 5000 px in Photoshop) and tried using the image as background but the same problem persists.
You can try this. The background image stay fixed position.
.background {
background: url("../images/plans-background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Can I prevent loading an entire image on a web page?

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?

When I set my background-size to anything other than cover the text inside my div overfllows whenever the image resizes. How do I prevent that?

I want my background image to be responsive so changed the size to 100% and auto but now the texts that I have inside my section is overflowing out of the image. This wouldn't happen if my image size was cover. How do prevent the text to overflow from the image.
.section1{
height: 600px;
background: url("img/Rectangle 1.jpg") no-repeat center;
background-size: cover;
}
html
<section class="section1">
<div class="container info">
<div class="row">
<div class="col-lg-12 " align="center">
Make Future Visible <span>™</span>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 info2" align="center">
Real-time predictive analytics for refining equipment eliminate accidents<br>
and fires, increases refinery uptime, decreases downtime and drastically<br>
reduces maintenance costs.
</div>
</div>
</div>
</section>
If you set the background position css to top center it will make the rectangle image start from the top of <section> element.
If you want the image 100% width, centred, and responsive, then a rectangle image will not work on a mobile.
See demo here https://jsfiddle.net/joshmoto/tfesu0cx/1/

Dimension of CSS Bootstrap Grid system

I'm creating a website for a company and their photographer asks me what dimensions the pictures on the website are.
I work with CSS Bootstrap and grid system like:
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/xxxx-1-2.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3 style="height:5%;"> “text"”</h3>
</div>
</a>
</div>
</div>
So on the server the images had a size of 474 x 698 pixels, but the grid system crops the image a bit?
What size/dimension does the grid system use?
Thanks a lot
I think all you need is some css to make your images adopt to a screen of the device. A good practice, that I usually do, is to place this line of code inside my css.
img {
max-width: 100%;
}
Make sure it's at top of your first imported document, so you can override it with out any trouble in case you need some other image width.
PS. This rule should be in bootstrap, so check how you adding bootstrap to your webpage.
What you can do is add a css for this background image.
.fh5co-grid{
background-image: url(images/xxxx-1-2.jpg);
background-size: cover;
background-repeat: no-repeat;
}
If you want to make sure this code will get the full screen width, make sure your html col-lg-12 is wrapped on a container-fluid.

Converting to responsive web design

I just finished my first page for a personal portfolio site. I am just a beginner when it comes to web development. I have set the width of my site to 1600 px, the same width of my background image.
What I wanted to do now is to convert the page to a responsive design. My only problem is that when I changed the width of the page to 100%, the position of my banner div is shifted to the left, instead of being in center.
here's a snippet of my code.
<body>
<div id="banner">
<div class="container_12">
<div class="grid_7 prefix_5" id="navbar">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="grid_10" id="bannertext">
<h1>Hello!</h1>
<div class="clear"></div>
<p>Hi, I am Gelo Lopez, an emerging digital marketing and PR Professional. I create stories for brands. I am the social media primmadonna</>
<p id="bannerbutton"><img src="Assets/Images/bannerbutton.png" width="171" height="44" alt="Gelo Lopez Portfolio" /></p>
</div>
</div>
</div><!--end of banner-->
CSS:
body {
width: 100%;
color: #5a5959;
font-size: 18px;
font-family: "Lao UI";
}
/* sections*/
#banner {
background-image: url(../Images/Banner-background.png);
height:660px;
color: #fff;
font-size: 24px;
}
I am also using a 960 gs template for 12 columns. I decided to put the container_12 div under the id=banner in order to place the content in center of the page.
I hope somebody could help me
I think what you mean is that the background image is being cut off to the right, rather than the banner div being 'shifted to the right'. The <div> as a block level element will fit it's parent, in this case it's the body which is set to 100% width.
If you're happy using CSS3, try adding background-size: contain to #banner which will scale your background image to the content area.
More info here: http://www.w3schools.com/cssref/css3_pr_background-size.asp
JSFiddle here: http://jsfiddle.net/davidpauljunior/LCFun/
You'll need to play around with background-position CSS tag. You can try putting in the extra line of CSS Code:
background-position: top left;
Also, since you're talking about it being a responsive site, you'll probably be aware that your background may not fill a screen size which you didn't design for. You'll probably need to repeat the background, or fix it... it's really according to your needs. Read up on Background repeat here: http://www.w3schools.com/cssref/pr_background-repeat.asp