CSS How to make background image strech like image
0
Hi everyone I have a problem when setting the background image for div. I want to set a full background image for div. It's almost done but the color is not correct. My picture has the gradient color
My CSS code
.cards-section .item-wrapper .item-inner.category_blue {
background: url('./images/post_blue.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The design
My present
The color is different. Do you know any way to fix it
HTML Code
<div class="row cards-wrapper">
<div class="card col-md-4 col-sm-12">
<div id="post-34" class="card_wrapper post-34 post type-post status-publish format-standard hentry category-uncategorized">
<div class="card_header card_inner fullBackgroundImage category_purple">
<h5 class="card_header_category">Uncategorized</h5>
<hr class="card_header_category_break">
<h3 class="card_title">Post 1</h3>
<p class="card_modified">Last update: November 21, 2018</p>
</div>
<div class="card-body while">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit duis tristique sollicitudin nibh. Cras semper auctor neque vitae tempus. In cursus turpis massa tincidunt dui ut. Dui nunc mattis enim ut. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Diam volutpat</p>
</div>
</div>
</div>
</div>
Background Image
css
asked Nov 21 '18 at 10:51
ToujouAyaToujouAya
504118
add a comment |
0
Hi everyone I have a problem when setting the background image for div. I want to set a full background image for div. It's almost done but the color is not correct. My picture has the gradient color
My CSS code
.cards-section .item-wrapper .item-inner.category_blue {
background: url('./images/post_blue.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The design
My present
The color is different. Do you know any way to fix it
HTML Code
<div class="row cards-wrapper">
<div class="card col-md-4 col-sm-12">
<div id="post-34" class="card_wrapper post-34 post type-post status-publish format-standard hentry category-uncategorized">
<div class="card_header card_inner fullBackgroundImage category_purple">
<h5 class="card_header_category">Uncategorized</h5>
<hr class="card_header_category_break">
<h3 class="card_title">Post 1</h3>
<p class="card_modified">Last update: November 21, 2018</p>
</div>
<div class="card-body while">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit duis tristique sollicitudin nibh. Cras semper auctor neque vitae tempus. In cursus turpis massa tincidunt dui ut. Dui nunc mattis enim ut. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Diam volutpat</p>
</div>
</div>
</div>
</div>
Background Image
css
asked Nov 21 '18 at 10:51
ToujouAyaToujouAya
504118
2
if you have a colour picker get the color codes and use background:linear-gradient(), instead of background-image.
– vssadineni
Nov 21 '18 at 10:56
Could you provide your html as well? Your css background-image can only cover the size of the div it is the background of, thus can only be as large as the div.
– Wernerson
Nov 21 '18 at 10:56
@Wernerson I have update the html code
– ToujouAya
Nov 21 '18 at 11:10
Please post the whole HTML code as I do not see any classed named cards-selection, item-wrapper or any of your other css selectors.
– Wernerson
Nov 21 '18 at 12:07
@Wernerson I have posted the whole HTML. But I don't think it's necessary
– ToujouAya
Nov 21 '18 at 14:41
add a comment |
0
0
0
Hi everyone I have a problem when setting the background image for div. I want to set a full background image for div. It's almost done but the color is not correct. My picture has the gradient color
My CSS code
.cards-section .item-wrapper .item-inner.category_blue {
background: url('./images/post_blue.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The design
My present
The color is different. Do you know any way to fix it
HTML Code
<div class="row cards-wrapper">
<div class="card col-md-4 col-sm-12">
<div id="post-34" class="card_wrapper post-34 post type-post status-publish format-standard hentry category-uncategorized">
<div class="card_header card_inner fullBackgroundImage category_purple">
<h5 class="card_header_category">Uncategorized</h5>
<hr class="card_header_category_break">
<h3 class="card_title">Post 1</h3>
<p class="card_modified">Last update: November 21, 2018</p>
</div>
<div class="card-body while">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit duis tristique sollicitudin nibh. Cras semper auctor neque vitae tempus. In cursus turpis massa tincidunt dui ut. Dui nunc mattis enim ut. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Diam volutpat</p>
</div>
</div>
</div>
</div>
Background Image
css
asked Nov 21 '18 at 10:51
ToujouAyaToujouAya
504118
Hi everyone I have a problem when setting the background image for div. I want to set a full background image for div. It's almost done but the color is not correct. My picture has the gradient color
My CSS code
.cards-section .item-wrapper .item-inner.category_blue {
background: url('./images/post_blue.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The design
My present
The color is different. Do you know any way to fix it
HTML Code
<div class="row cards-wrapper">
<div class="card col-md-4 col-sm-12">
<div id="post-34" class="card_wrapper post-34 post type-post status-publish format-standard hentry category-uncategorized">
<div class="card_header card_inner fullBackgroundImage category_purple">
<h5 class="card_header_category">Uncategorized</h5>
<hr class="card_header_category_break">
<h3 class="card_title">Post 1</h3>
<p class="card_modified">Last update: November 21, 2018</p>
</div>
<div class="card-body while">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit duis tristique sollicitudin nibh. Cras semper auctor neque vitae tempus. In cursus turpis massa tincidunt dui ut. Dui nunc mattis enim ut. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Diam volutpat</p>
</div>
</div>
</div>
</div>
Background Image
css
css
asked Nov 21 '18 at 10:51
ToujouAyaToujouAya
504118
asked Nov 21 '18 at 10:51
ToujouAyaToujouAya
504118
edited Nov 21 '18 at 14:40
ToujouAya
asked Nov 21 '18 at 10:51
ToujouAyaToujouAya
504118
asked Nov 21 '18 at 10:51
ToujouAyaToujouAya
504118
asked Nov 21 '18 at 10:51
ToujouAyaToujouAya
504118
504118
2
if you have a colour picker get the color codes and use background:linear-gradient(), instead of background-image.
– vssadineni
Nov 21 '18 at 10:56
Could you provide your html as well? Your css background-image can only cover the size of the div it is the background of, thus can only be as large as the div.
– Wernerson
Nov 21 '18 at 10:56
@Wernerson I have update the html code
– ToujouAya
Nov 21 '18 at 11:10
Please post the whole HTML code as I do not see any classed named cards-selection, item-wrapper or any of your other css selectors.
– Wernerson
Nov 21 '18 at 12:07
@Wernerson I have posted the whole HTML. But I don't think it's necessary
– ToujouAya
Nov 21 '18 at 14:41
add a comment |
2
if you have a colour picker get the color codes and use background:linear-gradient(), instead of background-image.
– vssadineni
Nov 21 '18 at 10:56
Could you provide your html as well? Your css background-image can only cover the size of the div it is the background of, thus can only be as large as the div.
– Wernerson
Nov 21 '18 at 10:56
@Wernerson I have update the html code
– ToujouAya
Nov 21 '18 at 11:10
Please post the whole HTML code as I do not see any classed named cards-selection, item-wrapper or any of your other css selectors.
– Wernerson
Nov 21 '18 at 12:07
@Wernerson I have posted the whole HTML. But I don't think it's necessary
– ToujouAya
Nov 21 '18 at 14:41
2
2
if you have a colour picker get the color codes and use background:linear-gradient(), instead of background-image.
– vssadineni
Nov 21 '18 at 10:56
if you have a colour picker get the color codes and use background:linear-gradient(), instead of background-image.
– vssadineni
Nov 21 '18 at 10:56
Could you provide your html as well? Your css background-image can only cover the size of the div it is the background of, thus can only be as large as the div.
– Wernerson
Nov 21 '18 at 10:56
Could you provide your html as well? Your css background-image can only cover the size of the div it is the background of, thus can only be as large as the div.
– Wernerson
Nov 21 '18 at 10:56
@Wernerson I have update the html code
– ToujouAya
Nov 21 '18 at 11:10
@Wernerson I have update the html code
– ToujouAya
Nov 21 '18 at 11:10
Please post the whole HTML code as I do not see any classed named cards-selection, item-wrapper or any of your other css selectors.
– Wernerson
Nov 21 '18 at 12:07
Please post the whole HTML code as I do not see any classed named cards-selection, item-wrapper or any of your other css selectors.
– Wernerson
Nov 21 '18 at 12:07
@Wernerson I have posted the whole HTML. But I don't think it's necessary
– ToujouAya
Nov 21 '18 at 14:41
@Wernerson I have posted the whole HTML. But I don't think it's necessary
– ToujouAya
Nov 21 '18 at 14:41
add a comment |
2 Answers
2
active
oldest
votes
1
If you want your background image to stretch like image, you can use
background-size: 100% 100%
so no matter the size of container, image will stretch to fill it.
answered Nov 21 '18 at 10:58
Mirza MašićMirza Mašić
9426
I don't see any difference. it's same like background size cover
– ToujouAya
Nov 21 '18 at 11:10
Well, not really. Cover resizes the background image, but keeps the ratio (so some parts of the image are not visible), while this stretches the background image to fill the container, no matter what the ratio of image/container is, and whole image is visible at all times. You can read more about it here: w3schools.com/cssref/css3_pr_background-size.asp
– Mirza Mašić
Nov 21 '18 at 12:07
Yes, but in this case, the difference between percentage and cover is really low, almost similar.
– ToujouAya
Nov 21 '18 at 12:36
add a comment |
0
It's just because of background-attachment fixed property. The image is resized to fill the whole space, when user will scroll that element. So the image is bigger and you don't see the whole image.
Just try to remove that fixed property if you really don't need it there.
answered Nov 21 '18 at 11:10
Michal SutkaMichal Sutka
11
It's not right. Without background-attachment fixed. The background image can't stretch full
– ToujouAya
Nov 21 '18 at 11:15
So maybe edit that background image and make it more wider, because browser want to scale proportionally that background.
– Michal Sutka
Nov 21 '18 at 12:14
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
});
}
});
draft saved
draft discarded
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%2f53410504%2fcss-how-to-make-background-image-strech-like-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
If you want your background image to stretch like image, you can use
background-size: 100% 100%
so no matter the size of container, image will stretch to fill it.
answered Nov 21 '18 at 10:58
Mirza MašićMirza Mašić
9426
I don't see any difference. it's same like background size cover
– ToujouAya
Nov 21 '18 at 11:10
Well, not really. Cover resizes the background image, but keeps the ratio (so some parts of the image are not visible), while this stretches the background image to fill the container, no matter what the ratio of image/container is, and whole image is visible at all times. You can read more about it here: w3schools.com/cssref/css3_pr_background-size.asp
– Mirza Mašić
Nov 21 '18 at 12:07
Yes, but in this case, the difference between percentage and cover is really low, almost similar.
– ToujouAya
Nov 21 '18 at 12:36
add a comment |
1
If you want your background image to stretch like image, you can use
background-size: 100% 100%
so no matter the size of container, image will stretch to fill it.
answered Nov 21 '18 at 10:58
Mirza MašićMirza Mašić
9426
I don't see any difference. it's same like background size cover
– ToujouAya
Nov 21 '18 at 11:10
Well, not really. Cover resizes the background image, but keeps the ratio (so some parts of the image are not visible), while this stretches the background image to fill the container, no matter what the ratio of image/container is, and whole image is visible at all times. You can read more about it here: w3schools.com/cssref/css3_pr_background-size.asp
– Mirza Mašić
Nov 21 '18 at 12:07
Yes, but in this case, the difference between percentage and cover is really low, almost similar.
– ToujouAya
Nov 21 '18 at 12:36
add a comment |
1
1
1
If you want your background image to stretch like image, you can use
background-size: 100% 100%
so no matter the size of container, image will stretch to fill it.
answered Nov 21 '18 at 10:58
Mirza MašićMirza Mašić
9426
If you want your background image to stretch like image, you can use
background-size: 100% 100%
so no matter the size of container, image will stretch to fill it.
answered Nov 21 '18 at 10:58
Mirza MašićMirza Mašić
9426
edited Nov 21 '18 at 12:04
answered Nov 21 '18 at 10:58
Mirza MašićMirza Mašić
9426
answered Nov 21 '18 at 10:58
Mirza MašićMirza Mašić
9426
answered Nov 21 '18 at 10:58
Mirza MašićMirza Mašić
9426
9426
I don't see any difference. it's same like background size cover
– ToujouAya
Nov 21 '18 at 11:10
Well, not really. Cover resizes the background image, but keeps the ratio (so some parts of the image are not visible), while this stretches the background image to fill the container, no matter what the ratio of image/container is, and whole image is visible at all times. You can read more about it here: w3schools.com/cssref/css3_pr_background-size.asp
– Mirza Mašić
Nov 21 '18 at 12:07
Yes, but in this case, the difference between percentage and cover is really low, almost similar.
– ToujouAya
Nov 21 '18 at 12:36
add a comment |
I don't see any difference. it's same like background size cover
– ToujouAya
Nov 21 '18 at 11:10
Well, not really. Cover resizes the background image, but keeps the ratio (so some parts of the image are not visible), while this stretches the background image to fill the container, no matter what the ratio of image/container is, and whole image is visible at all times. You can read more about it here: w3schools.com/cssref/css3_pr_background-size.asp
– Mirza Mašić
Nov 21 '18 at 12:07
Yes, but in this case, the difference between percentage and cover is really low, almost similar.
– ToujouAya
Nov 21 '18 at 12:36
I don't see any difference. it's same like background size cover
– ToujouAya
Nov 21 '18 at 11:10
I don't see any difference. it's same like background size cover
– ToujouAya
Nov 21 '18 at 11:10
Well, not really. Cover resizes the background image, but keeps the ratio (so some parts of the image are not visible), while this stretches the background image to fill the container, no matter what the ratio of image/container is, and whole image is visible at all times. You can read more about it here: w3schools.com/cssref/css3_pr_background-size.asp
– Mirza Mašić
Nov 21 '18 at 12:07
Well, not really. Cover resizes the background image, but keeps the ratio (so some parts of the image are not visible), while this stretches the background image to fill the container, no matter what the ratio of image/container is, and whole image is visible at all times. You can read more about it here: w3schools.com/cssref/css3_pr_background-size.asp
– Mirza Mašić
Nov 21 '18 at 12:07
Yes, but in this case, the difference between percentage and cover is really low, almost similar.
– ToujouAya
Nov 21 '18 at 12:36
Yes, but in this case, the difference between percentage and cover is really low, almost similar.
– ToujouAya
Nov 21 '18 at 12:36
add a comment |
0
It's just because of background-attachment fixed property. The image is resized to fill the whole space, when user will scroll that element. So the image is bigger and you don't see the whole image.
Just try to remove that fixed property if you really don't need it there.
answered Nov 21 '18 at 11:10
Michal SutkaMichal Sutka
11
It's not right. Without background-attachment fixed. The background image can't stretch full
– ToujouAya
Nov 21 '18 at 11:15
So maybe edit that background image and make it more wider, because browser want to scale proportionally that background.
– Michal Sutka
Nov 21 '18 at 12:14
add a comment |
0
It's just because of background-attachment fixed property. The image is resized to fill the whole space, when user will scroll that element. So the image is bigger and you don't see the whole image.
Just try to remove that fixed property if you really don't need it there.
answered Nov 21 '18 at 11:10
Michal SutkaMichal Sutka
11
It's not right. Without background-attachment fixed. The background image can't stretch full
– ToujouAya
Nov 21 '18 at 11:15
So maybe edit that background image and make it more wider, because browser want to scale proportionally that background.
– Michal Sutka
Nov 21 '18 at 12:14
add a comment |
0
0
0
It's just because of background-attachment fixed property. The image is resized to fill the whole space, when user will scroll that element. So the image is bigger and you don't see the whole image.
Just try to remove that fixed property if you really don't need it there.
answered Nov 21 '18 at 11:10
Michal SutkaMichal Sutka
11
It's just because of background-attachment fixed property. The image is resized to fill the whole space, when user will scroll that element. So the image is bigger and you don't see the whole image.
Just try to remove that fixed property if you really don't need it there.
answered Nov 21 '18 at 11:10
Michal SutkaMichal Sutka
11
answered Nov 21 '18 at 11:10
Michal SutkaMichal Sutka
11
answered Nov 21 '18 at 11:10
Michal SutkaMichal Sutka
11
answered Nov 21 '18 at 11:10
Michal SutkaMichal Sutka
11
11
It's not right. Without background-attachment fixed. The background image can't stretch full
– ToujouAya
Nov 21 '18 at 11:15
So maybe edit that background image and make it more wider, because browser want to scale proportionally that background.
– Michal Sutka
Nov 21 '18 at 12:14
add a comment |
It's not right. Without background-attachment fixed. The background image can't stretch full
– ToujouAya
Nov 21 '18 at 11:15
So maybe edit that background image and make it more wider, because browser want to scale proportionally that background.
– Michal Sutka
Nov 21 '18 at 12:14
It's not right. Without background-attachment fixed. The background image can't stretch full
– ToujouAya
Nov 21 '18 at 11:15
It's not right. Without background-attachment fixed. The background image can't stretch full
– ToujouAya
Nov 21 '18 at 11:15
So maybe edit that background image and make it more wider, because browser want to scale proportionally that background.
– Michal Sutka
Nov 21 '18 at 12:14
So maybe edit that background image and make it more wider, because browser want to scale proportionally that background.
– Michal Sutka
Nov 21 '18 at 12:14
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53410504%2fcss-how-to-make-background-image-strech-like-image%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
2
if you have a colour picker get the color codes and use background:linear-gradient(), instead of background-image.
– vssadineni
Nov 21 '18 at 10:56
Could you provide your html as well? Your css background-image can only cover the size of the div it is the background of, thus can only be as large as the div.
– Wernerson
Nov 21 '18 at 10:56
@Wernerson I have update the html code
– ToujouAya
Nov 21 '18 at 11:10
Please post the whole HTML code as I do not see any classed named cards-selection, item-wrapper or any of your other css selectors.
– Wernerson
Nov 21 '18 at 12:07
@Wernerson I have posted the whole HTML. But I don't think it's necessary
– ToujouAya
Nov 21 '18 at 14:41