I am using a full background image in my div, but when resizing the window it is not resizing properly from left and right, I do not want to use position:fixed because it is creating issues for me.
Kindly help, how can I fix this issue, the image should resize perfectly as per window size (resize).
<div class="row">
<div class="container-fluid">
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="loginbg"></div>
</div>
</div>
</div>
**css:**
.loginbg{
background: url("../../images/TalexAuthbg3.jpg") no-repeat center top;
z-index: 0;
background-size: cover;
height:100vh;
background-position:100%;
}
I want to render a full background image within the .loginbg div but it is not rendering properly.
You can use background-size: contain if you want the full image to show at every window size, because of background-size: cover crops the image to fit the window size without disturbing its aspect ratio.
.loginbg{
background: url("https://longstoryshortdesign.co.uk/wp-content/uploads/2017/03/mc-saatchi-hero-home.jpg") no-repeat center top;
z-index: 0;
background-size: contain;
height:100vh;
}
<div class="row">
<div class="container-fluid">
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="loginbg"></div>
</div>
</div>
</div>
Related
please i'm trying to use horizontal overflow using css , if i use just images i get the horizontal scroll this how i use it with images
<div class="d-flex overflow-hidden overflow-scroll-x ">
<img
class="max-width-200 "
src="../../../../assets/images/Creditrd.svg"
/>
<img
class="max-width-200 "
src="../../../../assets/images/Creditard.svg"
/>
</div>
if i use background images i dont get anything here's how i do it
<div class="d-flex overflow-hidden overflow-scroll-x">
<div class="account-wallet-imag max-width-200 border-radius-16">
heheh
</div>
<div class="account-wallet-imag max-width-200 border-radius-16">
eheehhh
</div>
</div>
this is my css
.account-wallet-imag {
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
width: 100%;
height: 100%;
background-image: url("#/assets/images/card.png");
}
please how can i go about this
I am trying to make static stripes on both sides of a browser where page content flows within. I am using Bootstrap. I have spared one cell on the left and one cell on the right for static content. These cells contain another which goes all along the page but 50% width of the container cell.
My code is as follows :
<div class="col-lg-1 col-md-1 col-sm-1">
<div style="background-image: url(./Content/images/strip_left.jpg); background-repeat: repeat-y; width: 20%; float: left; min-height:100%; position:fixed; top:0px; bottom:0px;"> </div>
</div>
<div class="col-lg-4 col-md-6 col-sm-8 col-lg-offset-3 col-md-offset-2 col-sm-offset-1">
<!-- This is where the page content flows -->
</div>
<div class="col-lg-1 col-md-1 col-sm-1" style="float:right; margin:0px; right:0px; text-align:right;">
<div style="background-image: url(./Content/images/strip_right.jpg); background-repeat: repeat-y; width: 20%; float: right; min-height:100%; position:fixed; top:0px; bottom:0px;"> </div>
</div>
The problem is that I am getting the following :
Left side is OK. But I haven't been able to close the gap on the right. float, margin, padding did not work. How can I fix this issue?
P.S. : Green areas are the leftmost and rightmost divs. Yellow area is the content area. White region is here I set the background image as stripe.
I think you are running into issues using both the float and fixed position.
position: fixed; /* use this only if you want the element fixed positioned in relation to the window */
Here's a simplified fiddle: https://jsfiddle.net/ro5hvwub/2
Is this what you are looking for?
I've been given a design that I'm having a lot of trouble building as a responsive site.
I'd like the image to extend to the edge of the browser window, so I've placed it as a background image in the fluid container, with a spacer image. The problem is that once we go mobile, the background image will appear beneath the copy above.
I've tried several other versions of this layout, and nothing works. Hoping someone has a suggestion.
Here's a rough markup.
.test {
background-image: url(http://placehold.it/1600x500 );
background-repeat: no-repeat;
background-position: 50% bottom;
background-size: cover;
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid test">
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: blue;">left col</div>
<div class="col-md-6"><img src="http://placehold.it/20x500/b0b0b0" alt="spacer"></div>
</div>
</div>
</div>
one way to achieve the responsive effect is to change the background-size accordingly to match the new visualization. That way you can alter from 50% 100% for the desktop version where it's right aligned and to 100% 50% on the mobile version where it fills half the height of the component.
As an example I've created this jsFiddle demo, that goes like this:
The html is pretty much the same:
<div class="container bg-pink">
<div class="row half-bg">
<div class="col-sm-6">
<p class="text-right">
<b>bold text first with some nuances</b> then some normal text to break the line. then some normal text to break the line. then some normal text to break the line.then some normal text to break the line.then some normal text to break the line.then some normal text to break the line.
</p>
</div>
<div class="col-sm-6 no-gutter">
<div class="half-holder">
</div>
</div>
</div>
</div>
The CSS (important bits) we define:
/* Image */
.half-holder {
height: 100px;
}
/* Normal */
.half-bg {
background: url('https://maxwelldemon.files.wordpress.com/2012/03/2x1-triangle.png') no-repeat right bottom;
background-size: 50% 100%;
}
/* The media query for responsive */
#media (max-width: 768px) {
.half-bg {
background-size: 100% 50%;
}
}
Hope it helps!
I'm trying to create a header with an image on it, using semantic.
This is my html
<div class="ui inverted vertical segment landpage-image">
<div class="ui page grid">
<div class="column">
<h1 class="ui title-header"></h1>
<div class="centered grid slogan">
<div class="column">
<p>Some content over here</p>
</div>
</div>
</div>
</div>
</div>
With the following css
.landpage-image{
height: 55%;
}
.landpage-image{
background-image: url(/images/landpage.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
But I'm getting this result:
Which looks pretty pixeled.
Setting your background to cover will stretch the image. If the image is a jpeg (or any other raster image) and is not as wide or tall as your container is, it will stretch thus causing pixelation.
I am having a problem with a background image appearing. check out my jsfiddle and tell me what i am missing?
<div id="postcard-container">
<div id="postcard">
<div id="postcard-title">
<h1>Milkweed</h1>
</div>
<div id="postcard-sub">What is Milk weed? Sign up to Find out</div>
<div id="postcard-email">
<hr>Email capture situation</div>
<div id="postcard-social"></div>
</div>
</div>
Change
background-image: url(...) no-repeat center center fixed;
to
background: url(...) no-repeat center center fixed;