ReactJS styled-components & CSS on background-image not working - javascript

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

Related

Why Background Image not Taking Full Width in React

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;
}

Maintain responsive image height

I am attempting to create a CTA component at the top of my react application, that contains the navbar and the CTA text. After successfully completing the component, I am noticing a minor bug that I would like to resolve. I am only providing my image with a width of 100% and no defined height. This causes the divs beneath the image to flicker upwards until the image has fully loaded. I know not providing the image with a defined height is causing it because the bug goes away when I provide the image with a random height. I am wondering if there is a way to provide the image with a responsive height that would behave in a similar way to just providing my image with 100% width.
my css code is as follows:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container .container-background {
opacity: 0.25;
}
.container-background-img {
width: 100%;
position: relative;
}
.container .content {
position: relative;
z-index: 1;
}
.app-outer {
max-width: 1170px;
margin: 0 auto;
position: relative;
padding: 0rem 1rem;
}
#media only screen and (max-width: 1170px) {
.container-background-img {
height: 656px;
object-fit: cover;
}
}
#media only screen and (max-width: 768px) {
.container-background-img {
height: 653px;
object-fit: cover;
}
}
/* CODE ADDED */
#navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#content {
position: absolute;
top: 20%;
}
my jsx code is as follows:
import React from "react";
import "./styles.css";
export default function App() {
return (
<>
<div className="container">
<div className="container-background">
<img
id="rob"
src="https://i.imgur.com/iyFtMNA.jpg"
alt="bg"
className="container-background-img"
/>
</div>
<div id="content" className="content">
I am the CTA
</div>
<div id="navbar">
<div
style={{
backgroundColor: "white",
height: 100,
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
I am the navbar
</div>
</div>
</div>
<div>I am beneath the cta</div>
</>
);
}
the following link I have provided contains a code sandbox: https://codesandbox.io/s/issue-react-forked-4lsdm?file=/src/App.js:0-868
Please Note: *** within the code sandbox the issue is not very apparent, but within my react application it is much more noticeable
As you mentioned, the issue is not really clear to see from your sandbox code.
I am not sure this would fix your issue but instead of using image tag try setting your CTA component to have background-image() instead.
Make sure to add other background css attributes too such as
background-repeat: no-repeat;
background-size: cover;
background-posistion: center;
padding-bottom: 60%;
Make sure to add padding-bottom: 60% (Your image seems to have a 3:2(w:h) ratio);
Hopefully, this works for you!

how do i resize my <img> in reactJS so that it fits to the screen?

I am trying to display an image on my application screen.
If I set my display settings (Scale and Layout) to 100%, then I am able to see the complete image on my screen. If it is set to default (150%), then the complete image is not displayed or I will have to scroll my screen to view the image fully.
How can I set the image to a default size so that I can always view the image completely without scrolling?
Code :
JSX file
<div id = "clearDiv" className = "App-header">
<img id="elementId" src= {`data:image/png;base64,${this.state.image}`}/>
</div>
CSS
.App-header {
background-color: #dfe3eb;
min-height: 88vh;
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
font-size: calc(10px + 2vmin);
color: rgb(1, 19, 1);
}
Thanks in advance.!!
Try object-fit property:
img {
width: 100%;
min-width: 100%;
height: 100%;
object-fit: cover;
}
Is 150% really a default?
Maybe setting width to 100vw
Also, this might help sizing div based on window width

Styling images of different sizes to a fixed size grid

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

If image height exceeds image width, vertically center image by cropping its top and bottom - possible with only CSS?

Given a scenario where you don't know the height and width of image elements in advance, let's say that in cases where image height is greater than image width, you'd like to vertically center the image by cropping the same amount of pixels form its top and bottom, such that the new image height matches the image width. For example, if an image has a width of 200px, and its height is 250px, crop 25px from its top and from its bottom.
Here's an example setup:
HTML:
<div class = 'cell'>
...
<div class = 'image_container'>
...
<img ...>
</div>
</div>
CSS:
.cell {
display: inline-block;
float: left;
/* width will be changed by use of '#media screen'.
Smaller browser window -> larger width */
width: 31%;
}
.image_container {
position: relative;
float: left;
width: 100%;
}
.image_container > img {
width: 100%;
}
Is it possible to accomplish the aforementioned center/crop operation using only CSS, or is it necessary to use javascript/jquery for this?
You can use the object-fit CSS attribute. It acts a lot like the background-size attribute.
.image_container > img {
object-fit: contain;
}
Note that this doesn't have full browser support as of now (October 2016) so you may want to look into setting the image as a background on a div and using background-position and background-size to deal with this instead of an <img> tag.
.image_container {
height: 300px;
background-color: cornflowerblue;
image-rendering: pixelated;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALklEQVQoU2NkgID/UBqdYmSESoJobOA/sgKQKTCFMDaKAuqYAHMs3CqiHInXmwDZGBMDEmk6SQAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-position: center center;
background-size: 200px;
}
<div class="image_container"></div>
.cover_image {
height: 400px;
background: url('http://lorempixel.com/g/400/200/') no-repeat scroll center center;
background-size: cover;
}
<div class="cover_image"></div>

Categories