This question already has answers here:
How to make background image fit correctly inside a board without losing responsiveness
(3 answers)
Closed 4 years ago.
I have code in which there is class box, i have given backgroundimage to class box box1.
My problem is that the image is not correctly fitting inside to the board. When i resize the window it is moving upwards. How to
correct it?
How to make the image fit correctly inside the board without losing responsiveness without extract the board element from the main background and use it as an element alone?
which is the method to do this, when i try to make it fit inside the board it is not only fitting inside the box, but also losing its responsiveness..
html, body {
background-image:url(https://i.ibb.co/K7mpxZG/background9.jpg);
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:100%;
overflow: hidden;
background-size: 100vw 100vh;
}
#box1 {
position: absolute;
top: 55.3vh;
left: -19.98vw;
cursor: pointer;
border:px solid #0066CC;
background-repeat: no-repeat;
background-size: cover;
}
#box1 p {
width: 10.0vw;
height: 1.0vh;
border-radius: 25%;
}
#container {
white-space: nowrap;
border:px solid #CC0000;
}
.containerr {
border: px solid #FF3399;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30.5vw;
}
.box p {
font-size: calc(2vw + 10px);
}
.hidden{
visibility: hidden;
}
p {
font: "Courier New", Courier, monospace;
font-size: 5vw;
color: blue;
text-align: center;
}
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box box1" id="box1" style="background-image:url(https://picsum.photos/200/300);">
<p name="values" id="name1" class="hidden"></p>
</div>
</div>
</div>
</div>
Add position: relative; to #container and to .container2 (parent) if you set position:absolute to child
See fiddle
html, body {
background-image:url(https://i.ibb.co/K7mpxZG/background9.jpg);
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:100%;
overflow: hidden;
background-size: 100vw 100vh;
}
#box1 {
position: absolute;
top: 55.3vh;
left: -19.98vw;
cursor: pointer;
border:px solid #0066CC;
background-repeat: no-repeat;
background-size: cover;
}
#box1 p {
width: 10.0vw;
height: 1.0vh;
border-radius: 25%;
}
#container {
white-space: nowrap;
border:px solid #CC0000;
position: relative;
}
.containerr {
border: px solid #FF3399;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30vw;
position: relative;
}
.box p {
font-size: calc(2vw + 10px);
}
.hidden{
visibility: hidden;
}
p {
font: "Courier New", Courier, monospace;
font-size: 5vw;
color: blue;
text-align: center;
}
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box box1" id="box1" style="background-image:url(https://picsum.photos/200/300);">
<p name="values" id="name1" class="hidden"></p>
</div>
</div>
</div>
</div>
Related
I'm trying to achieve this effect:
And as the screen is being reduced in size, and more letters of my H1 start to overlap the image, I would like them to change color to white. Eventually, when the screen is small enough, the text can just be inside the container that has a background image.
Here's the code I have so far:
.container {
max-width:1350px;
margin:0 auto;
background-image: url(https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg);
background-position: bottom left;
background-repeat: no-repeat;
background-size: cover;
padding-top:15em;
padding-bottom:15em;
position:relative;
}
.overlay {
background-color: transparent;
background-image: linear-gradient(90deg, #FFFFFF 30%, #F2295B00 0%);
opacity: 1;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
h1 {
font-size:60px;
letter-spacing:9px;
text-transform:uppercase;
}
.custom-cta {
display:block;
max-width:100px;
margin-top:10px;
text-align:center;
background:gold;
padding:20px 40px;
}
<div class="container">
<div class="overlay">
<div class="text-box">
<h1>Complete </br>Remodeli<span style="color:white;">ng</span></h1>
<p style="max-width:300px;">With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
<a class="custom-cta">Contact Us</a>
</div>
</div>
</div>
I would solve this by making layers. Consider having 2 layers:
A front layer with black text
A back layer with white text and the image.
Now the trick is getting the texts of both the texts to overlap perfectly. Use CSS Grid to create the layout and place the text and image where you need them. With some creative clipping (overflow: hidden) and layer ordering (z-index) you can control where the black text stops and where the white continues.
This will create an illusion of the color changing based on the screen size.
*, *::before, *::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
max-width: 1350px;
width: 100vw;
height: 100vh;
}
.layer {
grid-area: 1 / 1;
display: grid;
grid-template-columns: 30vw 70vw;
}
:is(.layer--front, .layer--back) .layer__title {
display: block;
font-weight: 700;
font-size: 60px;
letter-spacing: 9px;
text-transform: uppercase;
margin: 0 0 1rem;
}
.layer--front {
z-index: 2;
}
.layer--front .layer__title {
color: black;
}
.layer--back .layer__title {
color: white;
}
.layer__content {
grid-area: 1 / 1;
padding: 6rem 2rem;
z-index: 1;
}
.layer--front .layer__content {
overflow: hidden;
}
.layer__image {
grid-area: 1 / 2;
position: relative;
}
.layer__image img {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
padding: 1rem 1rem 1rem 0;
object-fit: cover;
object-position: left;
}
.custom-cta {
display: block;
margin-top: 10px;
text-align: center;
background: gold;
padding: 10px 20px;
}
<div class="container">
<div class="layer layer--front">
<div class="layer__content">
<h1 class="layer__title">Complete <br>Remodeling</h1>
<p style="max-width: 300px;">With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
<a class="custom-cta">Contact Us</a>
</div>
</div>
<div class="layer layer--back">
<div class="layer__content">
<span class="layer__title" aria-hidden="true">Complete <br>Remodeling</span>
</div>
<div class="layer__image">
<img src="https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg" alt="" />
</div>
</div>
</div>
Be sure to watch the example in Full page mode.
Here is an approach using flexbox, three overlapping containers, and backdrop-filter: invert(100%).
Basically, the solution is to create three overlapping containers (using z-index) to put one on top of the other.
The image goes as a background image on the under container. The image is then inverted using backdrop-filter: invert(100%) twice to avoid getting a negative. However, when when the text slides over the top of the image, then it is inverted only once, giving the sliding negative effect that is asked for.
The effect is best seen in a fiddle of the solution below as the vertical bar can be dragged left or right to see the sliding effect.
The yellow button changes to blue on sliding over the image, but I am sure that this is not a critical issue.
:root {
--image-height: 500px;
--image-width: 600px;
--top-offset: 350px;
--sidebar-width: 100px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
h1 {
margin-top: 50px;
font-size: 60px;
letter-spacing: 9px;
text-transform: uppercase;
}
p {
max-width: 300px;
}
.text-container {
margin-left: 20px;
}
.container {
display: flex;
align-items: stretch;
height: var(--image-height);
position: relative;
}
.sidebar {
flex: 1 1 var(--sidebar-width);
height: var(--image-height);
}
.image {
flex: 0 0 var(--image-width);
height: var(--image-height);
}
.container-under {
top: calc(0px - var(--top-offset));
z-index: -2;
}
.image-under {
background-image: url("https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg");
background-size: cover;
}
.container-middle {
top: calc(0px - calc(var(--top-offset) + var(--image-height)));
z-index: -1;
}
.image-middle {
background-color: transparent;
backdrop-filter: invert(100%);
}
.container-over {
top: calc(0px - calc(var(--top-offset) + var(--image-height) * 2));
}
.image-over {
background-color: transparent;
backdrop-filter: invert(100%);
}
.custom-cta {
display: block;
margin-top: 10px;
background: gold;
padding: 10px 20px;
width: 150px;
}
<div class="text-container">
<h1>Complete<br/>Remodeling</h1>
<p>With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
<a class="custom-cta">Contact Us</a>
</div>
<div class="container container-under">
<div class="sidebar"></div>
<div class="image image-under"></div>
</div>
<div class="container container-middle">
<div class="sidebar"></div>
<div class="image image-middle"></div>
</div>
<div class="container container-over">
<div class="sidebar"></div>
<div class="image image-over"></div>
</div>
Hero image needs to remain fixed until the parallax is complete, then page scrolls as normal.
This is the effect I am looking to achieve: http://www.bbdosf.com/
As you can see, the backgrounds don't line up perfectly.
https://codepen.io/danielle93/pen/arrBqd
window.addEventListener('scroll', function (e) {
var scrolled = window.pageYOffset;
const background = document.querySelector('.cover');
background.style.top = - (scrolled * 10) + 'px';
});
body{
height: 1200px;
margin: 0;
}
.container{
height:100vh;
overflow: hidden;
}
div{
position: relative;
}
.cover{
z-index: 1;
position: absolute;
background: #fff;
opacity: .75;
height: 100%;
width: 100%;
}
.underneath{
z-index: 0;
width: 100%;
}
.knockout {
background: url(https://placekitten.com/1200);
background-size: cover;
background-repeat; no-repeat;
background-position: top;
background-attachment: fixed;
color: red;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-weight: bold;
font-size: 300px;
font-family: arial, helvetica;
margin: 200px auto;
text-align: center;
}
<div class="container">
<div class="cover">
<div class="knockout"><a>meow.</a> </div>
</div>
<img class="underneath" src="https://placekitten.com/1200" alt="">
</div>
The issue is with the h5 text not appearing within the div (id=text). if anyone could advise please! Thank you for reading this and taking your time to help!
<div id="footer">
<div id="instagram">
<div id="text">
<h5>Please follow our instagram for future updates !</h5>
</div>
<div id="insta-logo">
<div>
<a class="whitelink" href="https://www.instagram.com/craftyclams/" id="insta"></a>
</div>
</div>
</div>
</div>
CSS code for footer:
Where the div is positioned:
From what I see, your text is inside the div. I set up a jsfiddle for you: https://jsfiddle.net/vfakqg90/
Next time, please provide your CSS, not as a screenshot. I typed your CSS out fully.
If you can, provide your full HTML and CSS so I can take a further look. For now, I don't see a problem according to the jsfiddle I put together for you. The CSS you provided as a screenshot is below for others:
div#footer {
width: 100%;
height: 7%;
background: url("footerbg.jpg");
background-size: 100% 100%;
min-width: 1380px;
background-repeat: no-repeat;
}
div#instagram {
width: 80%;
height: 100%;
margin: 0 auto;
display: table;
table-layout: fixed;
}
div#instagram div#text {
width: 70%;
height: 100%;
padding-top: 15px;
display: table-cell;
}
div#instagram div#text h5 {
font-family: BRUX, serif;
color: #fff;
text-align: center;
font-size: 1.7em;
}
h5 a {
font-family: BRUX, serif;
color: #fff;
border-bottom: 3px solid #fff;
padding-bottom: 3px;
}
div#instagram div#insta-logo div {
width: 100%;
height: 100%;
padding-top: 30px;
}
#insta {
background: url("logo/insta_icon.png");
background-size: 100% 100%;
background-repeat: no-repeat;
display: block;
height: 90%;
text-indent: 100%;
white-space: nowrap;
width: 70%;
max-width: 250px;
max-height: 250px;
}
This question already has answers here:
Can I set background image and opacity in the same property?
(15 answers)
How to set opacity in parent div and not affect in child div? [duplicate]
(7 answers)
Closed 7 years ago.
How to change opacity of the background image while hovering over a div with text? I tried to add opacity to hover but it affected text too so I assume It can be done only using jQuery since I can't change the HTML structure.
.wrapper {
margin: 0 auto;
max-width: 940px;
background: #EBEBEB;
}
.border__flex {
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.ideas__gallery div {
margin: 10px;
}
.ideas__gallery__h4 {
text-decoration: none;
font-weight: bold;
color: #fff;
font-size: 22px;
line-height: 1.2em;
padding: 0;
margin: 0;
}
.one:hover .ideas__gallery__h4,
.two:hover .ideas__gallery__h4,
.three:hover .ideas__gallery__h4,
.four:hover .ideas__gallery__h4,
.five:hover .ideas__gallery__h4,
.six:hover .ideas__gallery__h4,
.seven:hover .ideas__gallery__h4 {
color: #ff5b5d;
transition: all 0.2s ease-in;
}
.ideas__gallery__h3 {
color: #333;
font-weight: bold;
font-size: 22px;
text-align: center;
margin-bottom: 34px;
}
.one {
width: calc(33.3333333333333333% - 20px);
height: 310px;
background: url('http://carwallstar.com/wp-content/uploads/2014/11/ford-car-images2015-ford-mustang--2015-ford-mustang-29-----froggpondcom-w8lqchv6.jpg') 100% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}
.two {
width: calc(33.3333333333333333% - 20px);
height: 310px;
background: url('http://www.jdpower.com/sites/default/files/legacy_files/pictures/j/jdpower/0981/d6be82ef8f0dfc684d7aed8755d13dcbx.jpg') 50% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}
.three {
width: calc(33.3333333333333333% - 20px);
height: 310px;
background: url('http://www.pageresource.com/wallpapers/wallpaper/ford-mustang-shelby-gt-nice-cars.jpg') 50% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}
.four {
width: calc(33.3333333333333333% - 20px);
height: 310px;
background: url('http://7-themes.com/data_images/out/75/7029170-ford-cars-wallpaper.jpg') 50% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}
.five {
width: calc(66.6666666666666667% - 20px);
height: 310px;
background: url('http://img.otodriving.com/files/2015/10/Ford-www.otodriving.com-HD-33.jpg') 50% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}
.six {
width: calc(66.6666666666666667% - 20px);
height: 310px;
background: url('http://resources.carsguide.com.au/styles/cg_hero_large/s3/ford-mustang-2015-v8-gt-(2).jpg') 50% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}
.seven {
width: calc(33.3333333333333333% - 20px);
height: 310px;
background: url('http://carsformula.com/wp-content/uploads/2014/10/2015-Ford-Mustang-50-Year-Limited-Edition-Specs.jpg') 80% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}
#media screen and (max-width: 420px) {
/* ------- Footer Media Queries 320px------- */
.one,
.two,
.three,
.four,
.five,
.six,
.seven {
float: none;
width: 100%;
height: 100px;
text-decoration: none;
}
}
<div class="wrapper">
<div class="ideas__gallery">
<h3 class="ideas__gallery__h3"> Title</h3>
<a href="#">
<div class="one border__flex">
<h4 class="ideas__gallery__h4">Headline Three Words</h4>
</div>
</a>
<a href="#">
<div class="two border__flex">
<h4 class="ideas__gallery__h4">Headline Three Words</h4>
</div>
</a>
<a href="#">
<div class="three border__flex">
<h4 class="ideas__gallery__h4">Headline Four Nice Words</h4>
</div>
</a>
<a href="#">
<div class="four border__flex">
<h4 class="ideas__gallery__h4">One</h4>
</div>
</a>
<a href="#">
<div class="five border__flex">
<h4 class="ideas__gallery__h4">Headline Three Words</h4>
</div>
</a>
<a href="#">
<div class="six border__flex">
<h4 class="ideas__gallery__h4">One</h4>
</div>
</a>
<a href="#">
<div class="seven border__flex">
<h4 class="ideas__gallery__h4">One</h4>
</div>
</a>
</div>
</div>
you can use a trick like this
set the background to the :after
.one:after {
background: url('http://carwallstar.com/wp-content/uploads/2014/11/ford-car-images2015-ford-mustang--2015-ford-mustang-29-----froggpondcom-w8lqchv6.jpg') 100% 100% no-repeat;
background-size: cover;
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
source:
https://css-tricks.com/snippets/css/transparent-background-images/
My suggestion to you would be to use a picture editing software (such as PhotoShop) in order to change the opacity on the background images. Then, save these images into another file and in your CSS, change the background: url() to the less opaque images.
You can't change the opacity of a background image.
You can:
Use a background colour specified with an alpha channel
Set the opacity of an entire element
Use an image format with a built in opacity (such as PNG)
One approach is to restructure your content so that the background image is on an element that is a sibling of an element containing your content, absolutely positioning one or both of them, and then changing the opacity of the former. This introduces the challenge of setting everything to the desired height.
I just recently added the JQuery accordion affect to my site and applied the heightStyle: fill so that it would fill up the entire window.
However, it's filling up what looks like an extra 1px or maybe 2px, and now it's causing the vertical scroll bar to appear. I'm thinking I have extra padding that may be causing it, or some margin somewhere, but I've tried everything and can't seem to figure out where the extra pixel or two are coming from.
Can you guys figure out where? I just want to get rid of it so that it fills the entire page, but doesn't cause the vertical scrollbar.
Live Example: http://jsfiddle.net/r2Vra/ (If you resize the result window you will need to re-run)
HTML:
<body>
<div id="palette">
<div id="accordion">
<h3>Upper Case</h3>
<div id="upperCase"></div>
<h3>Lower Case</h3>
<div id="lowerCase"></div>
<h3>Numbers</h3>
<div id="numbers"></div>
<h3>Punctuation</h3>
<div id="punctuation"></div>
</div>
</div>
<div id="canvas">
<div id="trash"></div>
</div>
</body>
CSS:
/****************************************************************************************
* GENERAL
*****************************************************************************************/
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/****************************************************************************************
* PALETTE
*****************************************************************************************/
#palette {
float: left;
width: 320px;
height: 100%;
background-color: #888;
padding: 0 5px;
background: url(../img/texture.png) repeat;
}
#palette .letter {
font-family: 'Chango', cursive;
display: inline-block;
font-size: 4em;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
cursor: move;
}
/****************************************************************************************
* CANVAS
*****************************************************************************************/
#canvas {
margin-left: 320px;
height: 100%;
z-index: 0;
background: url(../img/refrigerator.jpg) no-repeat center center fixed;
background-position: left 200px center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#canvas .newLetter {
font-family: 'Chango', cursive;
display: inline-block;
font-size: 4.4em;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
cursor: move;
}
#trash {
position:fixed;
right:0;
bottom:10px;
z-index: 100;
}
#trash a{
display: block;
background: url(../img/trashcan-sprite-tiny2.png) no-repeat;
height: 110px;
width: 125px;
}
#trash a:hover{
background-position: 0px -113px;
}
#trash img {
border: none;
}
/****************************************************************************************
* JQUERY UI CSS OVERRIDE
*****************************************************************************************/
#accordion .ui-accordion-content {
padding: 0 .5em;
}
/*
.ui-helper-reset {
line-height: 1.2;
}
.ui-widget {
font-size: 1em;
} */
JavaScript:
$(function() {
$( "#accordion" ).accordion({ heightStyle: "fill" });
});
You can fix this by adding this:
#accordion .ui-accordion-content {
margin-bottom: -2px;
}
It's not perfect solution but it works.
I figured out a solution that works for me.
I just added an extra div and made it's boundaries a bit smaller than the parent div.
NOTE: It's unfortunate that I had to add an extra div, so if anyone still knows an alternative then let me know.
HTML:
<div id="palette">
<div id="container">
<div id="accordion">
<h3>Upper Case</h3>
<div id="upperCase"></div>
<h3>Lower Case</h3>
<div id="lowerCase"></div>
<h3>Numbers</h3>
<div id="numbers"></div>
<h3>Punctuation</h3>
<div id="punctuation"></div>
</div>
</div>
</div>
CSS:
#container {
height: 99.5%;
}