How to change hero image based on html page? - javascript

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");

Related

To add background-image with vuejs and looks good

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

How to set properties of background image in reactJS

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

changing html element background image js

i have searched google and on here but i cant exactly find a correct answer to my problem i used this code:
html {
background: url('../resources/imgs/bgs/mainbg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
that i got from the internet to set a background image that is always in the center and fits perfecly in the browser and it works great but i ran into a problem. i need to change the background image on a button click but i dont know how to target the html tag is it even possible? many thanks :)
my question was flagged as a duplicate but my problrm is not just getting the style of the html elememnt but changing it the same as the code snippet using only pure javascript
You have to set both backgroundImage and backgroundSize property. Try the following:
document.querySelector('#btnSetImage').addEventListener('click', function(){
var html = document.querySelector('html');
html.style.backgroundImage = "url('https://www.noodleman.co.uk/images/source/google_merchant_bulk_category_assign/google.jpg')";
html.style.backgroundSize = 'cover';
});
<button type="button" id="btnSetImage">Set Background Image</button>
Simply use:
document.getElementsByTagName('html')[0].style.backgroundImage = "url('img_tree.png')";
With jquery you could do the following
$('html').on('click', function(){
$('html').css({
"background": "url('https://picsum.photos/1200/3300/?blur') no-repeat center center fixed",
"background-size": "cover"
});
});
You can access the html element directly with documentElement:
/*Just change the image source with javascript*/
document.querySelector('#changeImage').addEventListener('click', function() {
document.documentElement.style.backgroundImage = 'url("https://www.fillmurray.com/400/400")';
});
/*Base settings in CSS*/
html {
background: url('https://www.fillmurray.com/g/400/400') no-repeat center center fixed;
/*This Would be a greyscale image*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<div style="color:#FFF;">Bill Murray!</div>
<!-- Just Some Content -->
<button id="changeImage">ChangeImage</button>

Nothing appears when placing a background image in a <div> element

Using bootstrap, I'm trying to set a background-image for the first row of an html page. The .background CSS class, contains info on setting up the background image. When I make it a class of <body>, it works fine and fills the whole page with a background image. When I try to put it in the first <div>, though, The image is not displayed at all.
From what I understand, you can set a background image for a <div>. What am I doing incorrectly that is making this not work?
CSS:
.background
{
background-image : url("image.jpg");
background-repeat : no-repeat;
background-size : cover;
}
HTML:
<body>
<div class ="row background">
<div class="col-xs-12">
<h1 class="titletext text-center" id="text" style="color : #000070; margin-top : 250px; display : none" ><b>Harness the power of the web</b></h1>
<input class="center-block" type="image" id="down" src="down-arrow.png" style="margin-top : 350px; display : none" ></input>
</div>
</div>
<!-- start new row -->
<div class="row">
<div class="col-xs-3">
<!-- img> /img -->
</div>
<div class="col-xs-9">
<p>
Blob
</p>
</div>
<script>
$("#text").fadeIn(6000);
window.setTimeout(function ()
{
$("#down").fadeIn(6000);
}, 6000);
</script>
</body>
Also, here is an attempt at putting it in JSFiddle: https://jsfiddle.net/yc1jnp6o/2/. For some reason Neither the image (which I changed for the fiddle) or the headline will display in the fiddle. This isn't the case on the apache server I have set up.
Don't use width, because he has used col-xs-12 in row , that means he want to 100% width
.background {
background-image : url("http://www.w3schools.com/css/img_fjords.jpg");
background-repeat : no-repeat;
background-size : cover;
min-height:200px;
}
You need to declare width and height when using background:
.background {
background-image: url("http://www.w3schools.com/css/img_fjords.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 200px;
height: 200px;
}
May be you can make use of pseudo code
.row.background:before{
display:block;
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image : url("http://www.w3schools.com/css/img_fjords.jpg");
background-repeat : no-repeat;
background-size : cover;
z-index:-1;
}
it covers whole row class
Check the fiddle

Skrollr issues with anchor-targets

I'm attempting to roll divs over one another as your scroll down a page using Skrollr. I've gotten the desired effect to work with two divs, but when I try to make it work with a 3rd, only the first and last div seem to work. I'm thinking this is because I'm not fully understanding how the data-anchor-target attribute in Skrollr works. Here is the HTML I'm attempting to use:
<div id="skrollr-body">
<div id="q1" data-0="top:0%;">
Text
</div>
<div id="q2" data-anchor-target="#q1" data--200-bottom="top:100%;" data-top-bottom="top:0%;">
Text2
</div>
<div id="q3" data-anchor-target="#q2" data--200-bottom="top:100%;" data-top-bottom="top:0%;">
Text3
</div>
</div>
And the CSS:
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#skrollr-body {
width:100%;
height:100%;
position:fixed;
}
#skrollr-body > div {
overflow:hidden;
position:absolute;
height: 100%;
width: 100%;
}
#q1 {
background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat;
background-size: cover;
}
#q2 {
background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat;
background-size: cover;
}
#q3 {
background: url(http://iwritealot.com/wp-content/uploads/2010/02/golden-clouds-wallpaper.jpg) center center no-repeat;
background-size: cover;
}
Fiddle here
What am I missing that is not allowing all 3 divs to behave as expected, instead of just the first and last?
Thanks.
Here's an example without anchor-target http://jsfiddle.net/YMYTy/1/
<div id="skrollr-body">
<div id="q1">
Text
</div>
<div id="q2" data-bottom-top="top:100%;" data-top="top:0%;">
Text2
</div>
<div id="q3" data-bottom-top="top:100%;" data-top="top:0%;">
Text3
</div>
</div>
It's different than what I described, but works.
There's this open feature request which, once implemented, will make this much easier https://github.com/Prinzhorn/skrollr/issues/185 You will then be able to use data-100p and data-200p to have animations after you scrolled down one or two times the height of the viewport.

Categories

Resources