CSS background problem with “fixed” and “brightness”
I have two questions for you and I will be happy to help me :)
Header of this site is with 2 background(BG) imgs side by side without any free space... BGs are huge images and my first question is:
I am trying to fix them for effect when scrolling (line 18 in css) but look how awful images display. Any ideas?
I put filter: brightness(50%); and who displayed on hover also has brightness which is really stupid but fact! It will be nice to help me :)
CODEPEN
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
html css html5 css3 background-image
asked Nov 24 '18 at 2:31
aburlakovaburlakov
32
add a comment |
I have two questions for you and I will be happy to help me :)
Header of this site is with 2 background(BG) imgs side by side without any free space... BGs are huge images and my first question is:
I am trying to fix them for effect when scrolling (line 18 in css) but look how awful images display. Any ideas?
I put filter: brightness(50%); and who displayed on hover also has brightness which is really stupid but fact! It will be nice to help me :)
CODEPEN
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
html css html5 css3 background-image
asked Nov 24 '18 at 2:31
aburlakovaburlakov
32
When you say the images look awful, what's wrong with them? The whitespace on the top?
– Mav
Nov 24 '18 at 3:47
Its normal. I just got this section from my project index.html. I have not body padding and margin. I am talking about images. This is main problem right now
– aburlakov
Nov 24 '18 at 3:50
What about the images? Do you want them to not be cropped?
– Mav
Nov 24 '18 at 3:53
add a comment |
I have two questions for you and I will be happy to help me :)
Header of this site is with 2 background(BG) imgs side by side without any free space... BGs are huge images and my first question is:
I am trying to fix them for effect when scrolling (line 18 in css) but look how awful images display. Any ideas?
I put filter: brightness(50%); and who displayed on hover also has brightness which is really stupid but fact! It will be nice to help me :)
CODEPEN
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
html css html5 css3 background-image
asked Nov 24 '18 at 2:31
aburlakovaburlakov
32
I have two questions for you and I will be happy to help me :)
Header of this site is with 2 background(BG) imgs side by side without any free space... BGs are huge images and my first question is:
I am trying to fix them for effect when scrolling (line 18 in css) but look how awful images display. Any ideas?
I put filter: brightness(50%); and who displayed on hover also has brightness which is really stupid but fact! It will be nice to help me :)
CODEPEN
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
html css html5 css3 background-image
html css html5 css3 background-image
asked Nov 24 '18 at 2:31
aburlakovaburlakov
32
asked Nov 24 '18 at 2:31
aburlakovaburlakov
32
edited Nov 24 '18 at 3:10
aburlakov
asked Nov 24 '18 at 2:31
aburlakovaburlakov
32
asked Nov 24 '18 at 2:31
aburlakovaburlakov
32
asked Nov 24 '18 at 2:31
aburlakovaburlakov
32
32
When you say the images look awful, what's wrong with them? The whitespace on the top?
– Mav
Nov 24 '18 at 3:47
Its normal. I just got this section from my project index.html. I have not body padding and margin. I am talking about images. This is main problem right now
– aburlakov
Nov 24 '18 at 3:50
What about the images? Do you want them to not be cropped?
– Mav
Nov 24 '18 at 3:53
add a comment |
When you say the images look awful, what's wrong with them? The whitespace on the top?
– Mav
Nov 24 '18 at 3:47
Its normal. I just got this section from my project index.html. I have not body padding and margin. I am talking about images. This is main problem right now
– aburlakov
Nov 24 '18 at 3:50
What about the images? Do you want them to not be cropped?
– Mav
Nov 24 '18 at 3:53
When you say the images look awful, what's wrong with them? The whitespace on the top?
– Mav
Nov 24 '18 at 3:47
When you say the images look awful, what's wrong with them? The whitespace on the top?
– Mav
Nov 24 '18 at 3:47
Its normal. I just got this section from my project index.html. I have not body padding and margin. I am talking about images. This is main problem right now
– aburlakov
Nov 24 '18 at 3:50
Its normal. I just got this section from my project index.html. I have not body padding and margin. I am talking about images. This is main problem right now
– aburlakov
Nov 24 '18 at 3:50
What about the images? Do you want them to not be cropped?
– Mav
Nov 24 '18 at 3:53
What about the images? Do you want them to not be cropped?
– Mav
Nov 24 '18 at 3:53
add a comment |
1 Answer
1
active
oldest
votes
make both images the background of the one "section"
html:
<section id="gtco-hero" class="custom-style-parent" data-section="home">
<div class="cs-parent">
<div class="col-xs-6 custom-style custom-image-1">
<a class="bg-text-cs" href="#">Los Angeles</a>
</div>
</div>
<div class="cs-parent">
<div class="col-xs-6 custom-style custom-image-2 cs-right">
<a class="bg-text-cs" href="#">Los Angeles</a>
</div>
</div>
</section>
css:
#gtco-hero {
display:block;
width:100%;
height:100vh;
background:
url("https://wallpaperbrowse.com/media/images/4052451-images.jpg"),
url("https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg");
filter: brightness(80%);
background-size: 50% auto, 50% auto;
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: left, right;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#gtco-hero:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
filter: brightness(50%);
}
https://codepen.io/carolmckayau/pen/eQrEWX
reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
answered Nov 24 '18 at 5:41
Carol McKayCarol McKay
1,9161711
But this zoom in on hover both images which is not searched effect...
– aburlakov
Nov 24 '18 at 13:06
codepen has been updated, if you like it please copy code over to here.
– Carol McKay
Nov 26 '18 at 10:27
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454695%2fcss-background-problem-with-fixed-and-brightness%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
make both images the background of the one "section"
html:
<section id="gtco-hero" class="custom-style-parent" data-section="home">
<div class="cs-parent">
<div class="col-xs-6 custom-style custom-image-1">
<a class="bg-text-cs" href="#">Los Angeles</a>
</div>
</div>
<div class="cs-parent">
<div class="col-xs-6 custom-style custom-image-2 cs-right">
<a class="bg-text-cs" href="#">Los Angeles</a>
</div>
</div>
</section>
css:
#gtco-hero {
display:block;
width:100%;
height:100vh;
background:
url("https://wallpaperbrowse.com/media/images/4052451-images.jpg"),
url("https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg");
filter: brightness(80%);
background-size: 50% auto, 50% auto;
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: left, right;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#gtco-hero:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
filter: brightness(50%);
}
https://codepen.io/carolmckayau/pen/eQrEWX
reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
answered Nov 24 '18 at 5:41
Carol McKayCarol McKay
1,9161711
But this zoom in on hover both images which is not searched effect...
– aburlakov
Nov 24 '18 at 13:06
codepen has been updated, if you like it please copy code over to here.
– Carol McKay
Nov 26 '18 at 10:27
add a comment |
make both images the background of the one "section"
html:
<section id="gtco-hero" class="custom-style-parent" data-section="home">
<div class="cs-parent">
<div class="col-xs-6 custom-style custom-image-1">
<a class="bg-text-cs" href="#">Los Angeles</a>
</div>
</div>
<div class="cs-parent">
<div class="col-xs-6 custom-style custom-image-2 cs-right">
<a class="bg-text-cs" href="#">Los Angeles</a>
</div>
</div>
</section>
css:
#gtco-hero {
display:block;
width:100%;
height:100vh;
background:
url("https://wallpaperbrowse.com/media/images/4052451-images.jpg"),
url("https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg");
filter: brightness(80%);
background-size: 50% auto, 50% auto;
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: left, right;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#gtco-hero:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
filter: brightness(50%);
}
https://codepen.io/carolmckayau/pen/eQrEWX
reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
answered Nov 24 '18 at 5:41
Carol McKayCarol McKay
1,9161711
But this zoom in on hover both images which is not searched effect...
– aburlakov
Nov 24 '18 at 13:06
codepen has been updated, if you like it please copy code over to here.
– Carol McKay
Nov 26 '18 at 10:27
add a comment |
make both images the background of the one "section"
html:
<section id="gtco-hero" class="custom-style-parent" data-section="home">
<div class="cs-parent">
<div class="col-xs-6 custom-style custom-image-1">
<a class="bg-text-cs" href="#">Los Angeles</a>
</div>
</div>
<div class="cs-parent">
<div class="col-xs-6 custom-style custom-image-2 cs-right">
<a class="bg-text-cs" href="#">Los Angeles</a>
</div>
</div>
</section>
css:
#gtco-hero {
display:block;
width:100%;
height:100vh;
background:
url("https://wallpaperbrowse.com/media/images/4052451-images.jpg"),
url("https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg");
filter: brightness(80%);
background-size: 50% auto, 50% auto;
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: left, right;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#gtco-hero:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
filter: brightness(50%);
}
https://codepen.io/carolmckayau/pen/eQrEWX
reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
answered Nov 24 '18 at 5:41
Carol McKayCarol McKay
1,9161711
make both images the background of the one "section"
html:
<section id="gtco-hero" class="custom-style-parent" data-section="home">
<div class="cs-parent">
<div class="col-xs-6 custom-style custom-image-1">
<a class="bg-text-cs" href="#">Los Angeles</a>
</div>
</div>
<div class="cs-parent">
<div class="col-xs-6 custom-style custom-image-2 cs-right">
<a class="bg-text-cs" href="#">Los Angeles</a>
</div>
</div>
</section>
css:
#gtco-hero {
display:block;
width:100%;
height:100vh;
background:
url("https://wallpaperbrowse.com/media/images/4052451-images.jpg"),
url("https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg");
filter: brightness(80%);
background-size: 50% auto, 50% auto;
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: left, right;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#gtco-hero:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
filter: brightness(50%);
}
https://codepen.io/carolmckayau/pen/eQrEWX
reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
answered Nov 24 '18 at 5:41
Carol McKayCarol McKay
1,9161711
answered Nov 24 '18 at 5:41
Carol McKayCarol McKay
1,9161711
answered Nov 24 '18 at 5:41
Carol McKayCarol McKay
1,9161711
answered Nov 24 '18 at 5:41
Carol McKayCarol McKay
1,9161711
1,9161711
But this zoom in on hover both images which is not searched effect...
– aburlakov
Nov 24 '18 at 13:06
codepen has been updated, if you like it please copy code over to here.
– Carol McKay
Nov 26 '18 at 10:27
add a comment |
But this zoom in on hover both images which is not searched effect...
– aburlakov
Nov 24 '18 at 13:06
codepen has been updated, if you like it please copy code over to here.
– Carol McKay
Nov 26 '18 at 10:27
But this zoom in on hover both images which is not searched effect...
– aburlakov
Nov 24 '18 at 13:06
But this zoom in on hover both images which is not searched effect...
– aburlakov
Nov 24 '18 at 13:06
codepen has been updated, if you like it please copy code over to here.
– Carol McKay
Nov 26 '18 at 10:27
codepen has been updated, if you like it please copy code over to here.
– Carol McKay
Nov 26 '18 at 10:27
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454695%2fcss-background-problem-with-fixed-and-brightness%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
When you say the images look awful, what's wrong with them? The whitespace on the top?
– Mav
Nov 24 '18 at 3:47
Its normal. I just got this section from my project index.html. I have not body padding and margin. I am talking about images. This is main problem right now
– aburlakov
Nov 24 '18 at 3:50
What about the images? Do you want them to not be cropped?
– Mav
Nov 24 '18 at 3:53