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;
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
image1
My background image don't load! Can anyone tell what's happening? Is it because of gatsby? Should I use gatsby-image instead?
background-image: url('/src/components/images/header.png');
background-size: cover;
background-position: center;
width: 100%;
}
<div id="page">
<div className='header'>
<h1>Header</h1>
</div>
<div>
<h1>About</h1>
</div>
<div>
<h1>Projects</h1>
</div>
</div>
We don't really have your code so we don't know which code you are using. But we do know which code does work and it is the following:
.header {
background-image: url("https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1");
background-size: cover;
background-position: center;
width: 100%;
}
<div class="header">
<h1>Header</h1>
</div>
The main difference perhaps is that in the CSS I use double quotation marks.
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>
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.