I am working with Vue.js, In a component which I am working should to set background-image and wrap all content into it. I have done until now as below:
<script>
export default {
name: "AppHero",
data(){
return{
image: { backgroundImage: "url(https://i.postimg.cc/0NbqSxfQ/banner-image.png)" }
};
},
props: {
titlehero: String,
subtitle: String,
}
}
</script>
.home-hero{
// background: url("https://i.postimg.cc/0NbqSxfQ/banner-image.png");
background-size: cover;
width: 100%;
height: 100vh;
}
<template>
<div :style="image" class="home-hero">
<div class="container" >
<div class="row">
<div class="col-lg-12">
<h3 class="fw-bold" >{{titlehero }}</h3>
</div>
</div>
</div>
</div>
</template>
Also I am sharing my link in the codepene:
enter link description here
My background-image looks like screenshot below:
but right results should to be such as design on Figma:
Any idea to fixed this.?
Thanks in advance.
You should try background-size: contain. You should also set the width of the element to 100vw instead of 100%. That way the div will be the width of the screen.
So your code should look like this:
.home-hero {
background: url("https://i.postimg.cc/0NbqSxfQ/banner-image.png");
background-size: contain; /* This changed */
width: 100vw; /* This changed */
height: 100vh;
}
Related
can someone please help me out with this ?
I have this problem: I am fetching an image from api and I want to set it as background (FULL-SCREEN background), somehow it doesn´t work for me when I want to set 100% height and width and other stylings to that image as inline styling. How am I supposed to do that ?
Or is it possible to fetch an image and somehow use it in css as background-image: ... ?
I am fetching an image from django back end.
render() {
return (
<section style={{backgroundImage: `url(${this.state.pic})`}}>
<h3>404 Page Not Found!</h3>
</section>
)
}
I don't know about styling elements. This may help you!.
You can refer here! https://reactjs.org/docs/dom-elements.html#style
render() {
return (
<section style={{
backgroundImage: `url(${this.state.pic})`,
backgroundPosition: center,
backgroundRepeat: no - repeat,
backgroundSize: cover
}}>
<h3>404 Page Not Found!</h3>
</section >
)
}
Give your section a classname.
Create a new CSS-styling sheet. Like "style.css" and link it to your react app.
Do the following
render() {
return (
<section className="mySection" style={{backgroundImage: `url(${this.state.pic})`}}>
<h3>404 Page Not Found!</h3>
</section>
)
}
//This goes in your style.css
.mySection{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
heigth: 100%;
}
h3{
z-index: 99;
}
I was able to get the background of my header container to show an image. However, i dont k ow how to set the size of the BACKGROUND IMAGE. SO what appears in the heading container just shows a image that is too big to appear in the header container.
I tried to search online
Change the sizes of the containers using vh and vw
Using Inline styles
//App.js
import React from "react";
import NavBar from "./NavBar";
const ContactUs = () => {
return(
<div className="contactUsContainer">
<NavBar/>
<div className="contactUsHeader">
<h2>Contact Us</h2>
</div>
<div>
<span></span>
</div>
</div>
);
}
export default ContactUs;
//app.css
.contactUsContainer {
height: 100%;
width: 100%
}
.contactUsHeader {
display: flex;
flex-direction: column;
align-items: center;
background-image: url("http://www.stapl.co.in/sites/default/files/imagecache/full-zoom/files/projects/6/83/6-83-wartsilla-3.jpg");
background-repeat: no-repeat;
background-size: cover;
height:30vh;
width: 100vw;
background-color: blue
}
Expected Result: background image to show full image, just in smaller size
Actual Result: background image shows very big, which omits much of the image content
The best you can do without any dirty JS is:
background-size: cover;
background-position: center;
Then you just need to pick the right ratio for your image
I have a rather annoying problem at the moment. I have tried numerous threads in here on how to set a grid of images to the same size no matter what size the image has to begin with. But it doesn't work and it's driving me crazy.
The results I'm getting looks like this:
My HTML looks like this:
<div class="container">
<div class="jumbotron">
<h3 class="text-center">Search Movie!</h3>
<form id="searchForm">
<input type="text" class="form-control" id="searchText" placeholder="Search for any movie...">
</form>
</div>
</div>
JavaScript:
function getMovies(movieSearched) {
axios.get('http://www.omdbapi.com?s='+movieSearched+'&apikey='+myKey).then((response) => {
movies = response.data.Search;
var output = ``;
$.each(movies, (index, movie) => {
output+= `
<div class="col-md-4">
<div class="box">
<img src="${movie.Poster}" height="250">
<h5>${movie.Title}</h5>
<a onclick="movieSelected('${movie.imdbID}')" class="btn btn-primary" href="#">Movie Details</a>
</div>
</div>
`;
$('#movies').html(output);
});
and CSS:
.box {
padding: 5px;
text-align: center;
overflow: hidden;
}
.box img {
margin-bottom: 30px;
display: grid;
width: 100%;
height: 250px;
object-fit: scale-down;
object-position: center;
}
#movieDiv {
display: grid;
}
#movies img, #movie img {
width: 100%;
height: 100%;
}
Maybe it has to do with the fact that I'm setting the images from the JS to the #movieDiv? Im new to this so I'm not really experienced. But how do I make the images the same size?
Thanks!
to fix the issue with the hight you can simply wrap your whole content inside a div and set the display to flex , it will automatically set the child div to the same hight no mater the size of the content inside of them , and then inside those div you can put your images
.container{
display:flex;
}
here is a codepen link
https://codepen.io/anon/pen/dmWQgm
I want the image (any image) height equal the window height even when I resize, I want to do it by jquery.
I used resize method in jquery but I don't get the results I need.
html:
<div class="header">
<div class="container">
</div>
</div>
css:
.container {
width: 1200px;
margin: auto;
}
.header {
background: url('https://preview.ibb.co/cu9YyH/download.jpg');
background-repeat: no-repeat;
}
jquery:
$(function () {
$(".header").height($(window).height());
$(window).resize(function () {
$(".header").height($(window).height());
});
});
There's no need for JS here. CSS alone will do the job, and is preferable for two reasons. Firstly this is a UI concern, so you shouldn't use JS as a crutch for that. Secondly, it performs better and you don't need to rely on the resize event to update the settings on the element.
To achieve what you need use vh (viewport height) units, like this:
html, body {
padding: 0;
margin: 0;
}
header {
background-color: #ccc;
height: 100vh;
}
div {
min-height: 50px;
}
<header>
I am the full-height header...
</header>
<div>
Some content here...
</div>
I've got a website I'm trying to build. The main page has a hero image, and on the second page I want to display a different hero image.
For index.html:
<!--Hero Section-->
<header id="about">
<div class="header-content">
<div class="header-content-inner">
<h1 id="homeHeading">Hone is home</h1>
<hr>
<p>this text is ontop of the hero image</p>
Find Out More
</div>
</div>
</header>
CSS:
header {
min-height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center;
background-image: url(../img/header.jpg);
color: #fff;
}
For membership.html (the page where I'd like the hero image to change):
<!--Hero Section-->
<header id="member">
<div class="header-content">
<div class="header-content-inner">
<h1 id="homeHeading">Hone is home</h1>
<hr>
<p>This text is on top of the hero image</p>
Find Out More
</div>
</div>
</header>
<!-- / Hero section-->
I tried to override the hero image using the id='member':
header #member {
background-image: url(../img/header2.jpg) !important;
}
But that doesn't work. So I thought maybe I could try some JavaScript:
window.onload = function(){
#member {
background-image: url('./img/header2.jpg');
}
}
and
$(function() {
$("header").attr("src", "../img/header2.jpg")
})
But neither worked. Please note that this isn't a website that's going live, it's for practice and for me to try and figure things out if I can.
You can use two classes, one common to both header tags and another specific to the id of the header. Also there is no need for !important as id has higher specificity.
Note that there is no space between tag and id in CSS, that is, it should be header#id.
HTML:
<!--Hero Section-->
<header id="about" class="commonHeader">
// rest of code
</header>
<!--Hero Section-->
<header id="member" class="commonHeader">
// rest of the code
</header>
CSS:
.commonHeader {
min-height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center;
color: #fff;
}
header#member {
background-image: url(../img/header2.jpg);
}
header#about{
background-image: url(someOtherImage);
}
You are using the wrong CSS selector. You should use something like this:
header#member {
background-image: url(../img/header2.jpg);
}
There shouldn't be space between header and #member. Your current selector means the #member tag that is a descendant of a header tag. And there is no need for !important.
Your Code
header #member {
background-image: url(../img/header2.jpg) !important;
}
you need to use
header#member{
background-image: url(../img/header2.jpg);
}
JS
Your Code
window.onload = function(){
#member {
background-image: url('./img/header2.jpg');
}
}
This don't Work
Using jQuery
Your Code
$(function() {
$("header").attr("src", "../img/header2.jpg");
});
you need to use
$("header#member").css("background-image","path to image");