I'm trying to get the background image of my homepage (www.insaka.org), to cover the entire width of the screen, but I can't seem to figure it out. I don't want the entire website to stretch, just the image. Any ideas?
HTML
<header class="business-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6 top-buffer">
<h1 class="tagline">Insaka</h1>
<h4 class="tagline">Increasing access to education for rural Zambian girls</h4>
</div>
</div>
</div>
CSS
.business-header {
background: url("/images/Insaka poster girls.JPG") center center no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
main {
#extend .container;
margin-top: 30px; // accommodate the navbar
}
section {
#extend .row;
margin-top: 20px;
}
Well, Lots of things is wrong with the html structure. You need a good front-end developer to get the things fixed.
The simplest solution i can provide is to apply the following styles to the main tag
main {
width: 100%;
max-width: 100%;
padding: 0;
}
See your main tag has max-width
main {
max-width: 100%;
padding: 0;
}
Use height:100vh and width:100vw to set container to fit in
screen.
vh = visual-height
vw = visual-width
In your case use 100vw to fit element to current screen
Related
1.How do I change the image size for the background url depending on screen size?
<main id="main">
<section class="uvsbg text-center">
<div class="container" data-aos="fade-up" style="height:950px;">
<div class="row" style="background: url('assets/img/contact-bg5.jpg'); background-size: 100% 100%; position: relative; height: 850px;">
<div class="col-md-12"> <h1 style="color:#fff;text-align:center;margin-top:50px;font-size: 52px;">Contact Us
There are several ways you could do that.
If you are interested in the background being the full size of the element, replace the style attribute of the row div with this: (Source)
background: url(assets/img/contact-bg5.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Otherwise, you would have to use Javascript to do this if you do not want the background to be the full width of the element. (You can learn a bit about this here)
Use CSS media queries. Replace the inline-CSS with a class and add the CSS to an external file or using internal CSS.
<main id="main">
<section class="uvsbg text-center">
<div class="container" data-aos="fade-up" style="height:950px;">
<div class="row" class="change-bg-image">
<div class="col-md-12"> <h1 style="color:#fff;text-align:center;margin-top:50px;font-size: 52px;">Contact Us
.change-bg-image {
background: url('assets/img/contact-bg5.jpg');
background-size: 100% 100%;
position: relative;
height: 850px;
}
#media only screen and (max-width: 768px) {
.change-bg-image {
background-size: 50% 50%;
position: relative;
height: 400px;
}
}
you can use these values as well
background-size: auto|length|cover|contain|initial|inherit;
#media screen and (max-width: 992px){
.row{
background-size: 50% 50%;
}
}
I am trying to tile some photo's and obviously some are in landscape and some are in portrait, when I fit my CSS one way it fits landscape when I do it another way it fits portrait. What I need is a box that will fit pics, keep aspect ratio and not hide anything.
I currently have this for html and css:
<div class="container-fluid">
<div class="row event_cover_container">
<section class="event_cover" style="background-image: url('<%= events.photos.link %>');">
<div class="">
<h4><%=events.title %></h4>
</div>
</section>
</div>
.event_cover_container {
width: 25%;
margin: 5px 5px;
}
.event_cover {
background-color: white;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: left top;
height: 500px;
width: 400px;
}
What is the right way to go about this? I am having some difficulty. Ideally I would like to just change the height and width elements so I can keep things tidy for responsiveness.
If your curious about the inline style for background image, I am pulling in the image using Node.js, this gives me the image.
I did some more looking around and found this article:
https://www.smashingmagazine.com/2009/09/backgrounds-in-css-everything-you-need-to-know/
Very handy article and I found that I needed to use
background-size: contain;
This tells it to maintain the aspect ratio. Then I just gave it a height, 400px in this case. I contained my event within a parent div of 25% so it should scale well!
If I missed or didnt think of something let me know !
I think you should use "background-size: cover".
.event_cover_container {
margin: 5px 5px;
}
.event_cover {
background: url('http://www.hdwallpapers.in/walls/loneliness-wide.jpg') center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 500px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<div class="container-fluid">
<div class="row event_cover_container">
<section class="event_cover">
<div class="">
<h4><%=events.title %></h4>
</div>
</section>
</div>
I've been working on page for my client and I want to have background image on body (in fiddle there is black color instead of image) and content wrapper with width of 1200px (or so) and height of 100% of the page with white color background.
The problem is, that even though I have all parental elements set to have height 100%, the background is not 100% height. It's acting weird and I've tried to rewrite for 4th time without success. I don't know what is wrong. Could you please give me a hint, tip or solution. Thanks!
html, body {
background: url('./images/background.jpg') no-repeat center center fixed;
font-family: Verdana;
font-size: 14px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 1200px;
margin: 0 auto;
height: 100%;
min-width: 1200px;
background-color: white;
background-size: cover;
}
.leftcol {
width: 350px;
height: 100%;
float: left;
}
.rightcol {
width: 850px;
height: 100%;
float: right;
}
.footer {
width: 1200px;
height: 50px;
float: left;
text-align: center;
}
Also I have noticed that footer is acting wierd to, it's in the middle of the page in 'rightcol' element.
Here is a fiddle: http://jsfiddle.net/cramb5fg/1/
See if this JSFiddle gets you closer. It has a full screen background too.
It fixes a few errors like:
Clearing your floated column divs by adding a "Clearfix" to the container that now holds only the 2 column divs.
A wrapper that displays at 100% height and width was added to contain the header, main content, and footer. It also has the main background applied.
The float was removed from the footer, and now the footer is absolutely positioned at the bottom, in relation to the main wrapper.
The empty <div class="header"></div> was removed.
HTML Structure in the JSFiddle Example (based on your wireframe)
<div id="main-wrapper">
<div class="navigation">
<nav>
<h1><i class="fa fa-car">Title</i></h1>
</nav>
</div>
<div class="container clearfix">
<div class="leftcol">
<div class="sidebar">
<div class="sidebar-head">Title</div>
<div class="sidebar-body"><p>...</p></div>
</div>
</div>
<div class="rightcol"><p>...</p></div>
</div> <!-- end container clearfix -->
<div class="footer">Copyright © 2014</div>
</div> <!-- end main-wrapper -->
Give this wireframe a good test because some details may have been overlooked, also test by enlarging and reducing the browser area, and holding down CTRL+ or - to to enlarge and shrink the screen.
I'm not sure exactly what you are trying to do but your example code is different than your fiddle. You should be able to make your background 100% easily.
html {
background: url(http://placehold.it/400) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
See fiddle here
Also, check out http://css-tricks.com/perfect-full-page-background-image/ for more info
edit: I've updated your fiddle with what I think you are trying to do
CSS heigh will if you define position absolute/fixed. such:
.class_name{
position:absolute;
height:100%;
top:0;
left:0;
}
One more important matter: top and left also compulsory.
I'm trying to create a responsive, FIXED background that works on all major browsers.
Basically I'm after the typical background:cover behavior (scales with browser size) BUT, want the background to be fixed to create a parallax effect.
Is this even possible if so, how?
The CSS so far WITHOUT Fixed:
#front_header {
background: url(1.png) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#front_header .featured {
width: 100%;
max-width: 950px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
#front_header .txt {
margin: 19.5% 0 19.5%;
text-align:center;
display: block;
}
The Body HTML:
<section id="front_header">
<div class="featured">
<div class="txt">
<h2>Test</h2>
</div>
</div>
</section>
As you can see, when you resize this, the background resizes slightly. However if I add
background-attached:fixed;
The background no longer resizes, only behaves like a fixed background should.
Try this:
keep the
background-attached:fixed;
and instead of background-size: cover, try :
background-size: contain;
Also for future reference, try and add your code to : http://jsfiddle.net
it's best when you simulate the problem for everyone to see and help.
I am having trouble getting my image to display when there are no fixed height and width assigned. I want my image to be flexy and responsive with my grid, so what I thought would work is to set height and width to 100% but no avail.
How can I get the image to show and be able to change size accordingly?
HTML
<div class="row">
<div class="large-12 columns">
<div class="hero">
<img id="image" src="steve1.png" alt=""/>
</div>
</div>
</div>
CSS
.hero {
max-width: 100%;
height: auto;
background-repeat: no-repeat;
margin: 0;
}
Give this a shot:
html {
min-height: 100%;
background-size: cover;
background-image: url(steve1.png);
background-repeat: no-repeat;
background-position: right bottom;
}
body{
min-height:100%;
}
Try adding to the css:
.hero img {width:100%;}
You have to add the style to the img it self, not the container div.