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.
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 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>
Hi guys can you help me how to create a the design I made in Photoshop. I actually used col-md-6 to make it two columns. but the problem is that making on div height is bit taller than the other. Here is the image I am talking about
<div class="col-md-6" class="white">
<h1>LOGISTIC</h1>
</div>
<div class="col-md-6" class="ship">
</div>
<div class="col-md-6" class="black">
<h1>DELIVERY</h1>
</div>
<div class="col-md-6" class="pipe">
</div>
<div class="col-md-6" class="white">
<h1>STORAGE</h1>
</div>
<div class="col-md-6" class="tank">
</div>
css
.ship{
background: url(../img/resources/ship.png);
}
.tank{
background: url(../img/resources/tank.png);
}
.pipe{
background: url(../img/resources/pipe.png);
}
Please Help I am stock here, thanks in advance
Make sure that you specify the height in all your classes below:
.ship{
height: /*set the height of ship.png*/
background-image: url(../img/resources/ship.png);
}
.tank{
height: /*set the height of tank.png*/
background-image: url(../img/resources/tank.png);
}
.pipe{
height: /*set the height of pipe.png*/
background-image: url(../img/resources/pipe.png);
}
I've been wresting with this for a couple of hours now and am not making progress. Thought I would come here for help. My task is simple and common. Using BS3, I am trying to have a full page container have a background image which will resize when you resize the browser. Seems simple enough but the few solutions I've found on here simply don't work. Here's where I'm at:
<section id="LandingRow">
<div class="LandingRowWrapper">
<div class="container-fluid">
<div class="row">
<%--Visible in small, med, large devices.--%>
<div class="col-sm-6 col-sm-offset-6 hidden-xs">
<div class="row">
...content...
</div>
<div class="row">
...content...
</div>
</div>
<%--Visible in xs devices only.--%>
<div class="col-sm-12 visible-xs">
...content...
</div>
</div>
</div>
</div>
...and my css....
.LandingRowWrapper
{
border-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-color: #bbd8e7;
background-color: #ffffff;
background-image: url('../images/slider3.jpg');
}
Much appreciated!!
If you want the background to cover both the height and width of the container, I would use background-size: cover;. If you want it to just scale horizontally and keep the height proportionate background-size: 100;% should do the trick.
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;