Question Details:
I Was Trying to set the background image in react but the positioning is not working properly. The Image gets zoomed a lot, Plus when I change the property of background-size from cover to contain, It will squeeze to the center instead of taking the full width of the container.
React Component
import React from 'react'
import arrow from '../images/icon-arrow-down.svg'
function Showcase() {
return (
<div>
<section className="showcase">
<div className="overlay">
<h1>We are creative</h1>
<img src={arrow} alt="" />
</div>
</section>
</div>
)
}
export default Showcase;
----------
CSS Code
**<!-- language: lang-css -->**
/*ShowCase*/
.showcase{
background-image: url('./images/mobile/image-header.jpg');
height:100vh;
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100%
}
.showcase .overlay{
height:512px;
display:flex;
align-items: center;
justify-content: center;
}
<!-- end snippet -->
The Preview of Output is
[1]: https://i.stack.imgur.com/M1NRu.jpg
Try removing background-size: 100% from .showcase.
This should ensure that the size of the image can be larger than the container so your background-position: cover can be the full height and width of it's dimensions.
*Edit (full styles for showcase):
.showcase{
background-image: url('./images/mobile/image-header.jpg');
height:100vh;
width: 100vw;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Related
I'm trying to create the landing page for a project of mine and I ran into several problems that I just can't seem to fix. I'm using ReactJS with styled components for styling.
This is the full picture of the hero image on a desktop size
This is for the mobile version of the page
Above are pictures of the hero images both for desktop size and mobile size. Below are what I have so far. You will be able to see the problems along with the code I have.
what I have with the desktop hero image so far
how it looks at tablet size
(Please ignore the text along with the button on the background image for now)
As you can see the background images look different from the full picture. Either they're getting cut off or the full image is not showing.
picture of the code
I will also write the code (ReactJS first):
import React, {useState} from 'react'
import { Link } from 'react-scroll'
import subittHero from '../../images/subittHeroImg.svg'
import subittHeroMobile from '../../images/subittHeroImgMobile.svg'
import { Button } from '../ButtonElements'
import { HeroContainer, HeroBg, ImgBg,
HeroContent, HeroH1, HeroSub, HeroSubPink,
HeroBtnWrapper, ArrowForward, ArrowRight} from './HeroElements'
const HeroSection = () => {
const [hover, setHover] = useState(false)
const onHover = () => {
setHover(!hover)
}
return (
<HeroContainer>
<HeroBg>
{/* <img src={subittHero} width="100%"/> */}
<ImgBg image={subittHero} mobile={subittHeroMobile} />
</HeroBg>
<HeroContent>
<HeroH1>Welcome</HeroH1>
<HeroSub>SUBSCRIBE HOW <HeroSubPink> YOU </HeroSubPink> WANT TO</HeroSub>
<HeroBtnWrapper>
<Button
to="signup"
onMouseEnter={onHover}
onMouseLeave={onHover}
primary="true"
dark="true">
Explore {hover ? <ArrowForward /> : <ArrowRight/>}
</Button>
</HeroBtnWrapper>
</HeroContent>
</HeroContainer>
)
}
export default HeroSection
The styled-component code just for the three tags in relations to the image:
export const HeroContainer = styled.div`
background: #231F20;
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: center;
align-items: center;
padding: 0;
`
export const HeroBg = styled.div`
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
grid-column: 1 / 3;
grid-row: 1 / 2;
align-self: stretch;
`
export const ImgBg = styled.div`
max-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
background: #F2F2F2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url(${(props) => props.image});
#media (max-width: 768px) {
background-image: url(${(props) => props.mobile});
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
`
I've tried experimenting with background-size: cover attribute, position, width, height, etc. but nothing seems to get it to work.
It only works when I do an html img tag (commented out on line 20) with a width of 100%.
I'm trying to code it so that the page will be fully responsive on different desktop resolutions and mobile device sizes.
.container {
width: 100%;
}
.bg-image {
width: 100%;
min-height: 512px;
height: 25vh;
background-size: cover;
background-position: center;
}
<div class="container">
<div class="bg-image" style="background-image: url('https://dummyimage.com/1920x960/000000/fff')"></div>
</div>
Instead of applying object-fit (since this property applies to replaced elements rather than backgrounds — see my note above), you can affect your background image the way you want to with the background-size and background-position properties.
background-size: cover, for example, will ensure that your image always fills its parent frame. Throw background-position: center on it to make sure that the image center remains in the frame's center.
Of course, there are other size and positioning options as well. But this seems to be more or less what you're after.
MDN - background-size
MDN - background-position
Smashing Magazine - A Deep Dive Into object-fit And background-size In CSS
Need help creating a full page gallery. I tried various options. I'm trying to create full page gallery that lets the user scroll vertically though 1 image at a time.
Here's my code:
<style>
#img1 {
background-image: url("<?php echo $image ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img2 {
background-image: url("<?php echo $image2 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img3 {
background-image: url("<?php echo $image3 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div id="img1"></div>
<div id="img2"></div>
<div id="img2"></div>
I'm stuck on the javascript/jquery solution to detect if the user has scrolled. I want to change images if the user scrolls up 10 pixels or down 10 pixels.
Here's an example of what I'm trying achieve:
http://themes.themegoods.com/photome/demo/gallery-archive/gallery-archive-fullscreen/
It would be better to use js libs like "fullPage.js, smart scroll, pagePiling.js" those help you to make a perfect page or gallery scroll like what you wanted to achieve, for more information follows below links:
https://alvarotrigo.com/fullPage/
http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/
https://alvarotrigo.com/pagePiling/
I want to use image overlay when a page is scrolled like here (see how raindrops and fish appear and a man disappears when scrolling).
I tried to make it with parallax effect using CSS only, but it's not what I need, because it doesn't work on mobiles like the example above.
I will be thankful if you advise me some javascript hacks with 'onscroll' or something else.
My code
HTML
<body>
<div class="parallax">
<div class="bg_one"></div>
<div class="bg_two"></div>
</div>
</body>
CSS
.parallax [class*="bg_"] {
position: relative;
height: 900px;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.parallax .bg_one {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20пни.png);
}
.parallax .bg_two {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20квартиры.png);
}
It's a very nice idea!
I've tested your code not in a real mobil but on Chrome > inspect >toggle device toolbar (left top). This allows you to test a web page in a mobil like environment. I've made a few changes in your css and it seems to work:
.parallax [class*="bg_"] {
position: relative;
height: 100vh;
background-attachment: fixed;
background-position: top center;
background-size: cover;
}
.parallax .bg_one {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20пни.png);
}
.parallax .bg_two {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20квартиры.png);
}
<div class="parallax">
<div class="bg_one"></div>
<div class="bg_two"></div>
</div>
I'm using bootstrap inside of React to display a grid of images in fixed size boxes. The images are all of different sizes and I don't want to distort them. The behavior I'm looking for is an image displayed in the center of a fixed size box, say 325X250 with a white(or any color) background. I'm really not a CSS person, thus the question.
This is my React code.
return (
<div className="row">
<div className="image-viewer">
{this.state.overlay}
<ul className="list-inline">
{this.state.images.map(function (image) {
return (<li key={image.src}><a href="#" onClick={this.handleClick} data-id={image.mediaId}><div className="img-container "><img
src={image.src}
className="img-responsive"
alt={image.mediaId}/></div></a></li>);
}, this)}
</ul>
</div>
</div>
);
This is the styling I've done till now,
.image-container{
width: 250px;
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.image-container img{
height: auto;
width: 100%;
}
This clearly doesn't work. I've looked into this link,
How can I make all images of different height and width the same via CSS?
But couldn't get any solution to work to my requirement.
Any help appreciated.
As an alternative to the <img> tag, you could use any block level element and CSS background properties:
background-image: url(http://domain.top/path/to/img.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
The property background-size and the value contain will render a background image to stretch to it's containing element's edges as far as it can without distortion and will maintain original aspect ratio.
SNIPPET
.img {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
outline: 1px dashed red;
width: 325px;
height: 250px;
margin: 10px auto;
}
#bbc {
background-image: url(http://i.imgur.com/4TLlrL3.png);
}
#lena {
background-image: url(http://i.imgur.com/o1RbMvI.png);
}
#normal {
background-image: url(http://i.imgur.com/43uy0hP.png);
}
<div id='bbc' class='img'></div>
<figure id='lena' class='img'></figure>
<section id='normal' class='img'></section>
Try adding 100% to both of them:
.image-container img{
height: 100%;
width: 100%;
}
Adding 100% to both of them will have it go full width of parent element
I have this HTML. With the following:
<div class="item">
<div class="bg_img"></div>
<h1>morning</h1>
<h2>today</h2>
<p>lorem ipsum.</p>
</div>
Background image to this content CSS:
#container .item .bg_img{background:url('../img/mainpage/demo.jpg') no-repeat;}
This structure is working ok. But I want to attach this background images to body and full screen size. How can I do this via JavaScript or pure jQuery (no plugin)?
Try below code...
#container .item .bg_img{
background: url('/img/mainpage/demo.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use this CSS:
background-size: cover;
Do you mean an image that is related to the context of the body and not of .item?
You can use position:fixed for that. A top, left, bottom and right will ensure it will take the whole page.
background-size: cover will make sure the image itself will cover the page. Depending on the image you use, you might want another solution. Ex: you can center an image and fade to a background color (but that's up to you)
Use a z-Index of -1 to ensure it does not obscure your content
item .bg_img {
background:url('http://www.ninahale.com/wp-content/uploads/2013/08/Post-Enhanced-Campaigns-World.jpg') fixed center center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
Fiddle: http://jsfiddle.net/Aa8fe/
Even i struggled for the same and atlast i got a solution..its below..
body //your container name
{
background-image: url(Images/caramel%20gradient%20for%20website.png);
background-size: 100%;
}