Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Please check below web template image.
URL - https://ibb.co/cD3iH8
I am expecting to use above abstract design image as background for a whole page.
kindly share the best approach to achieve this.
Multiple options here. You can play around with:
background-size: 100%
or
background-size: cover
or
background-size: contain
Good luck!
Use body height same as image height:
body{
background-image:url('https://image.ibb.co/iGhzqT/atach_6.png');
height:5788px;
background-size: contain;
}
https://codepen.io/spmsupun/pen/YvvJWb
add
background-repeat:no-repeat;
background-size:contain;
to your style sheet .it will works fine .I'm added the snippet below
body{
background:url('https://image.ibb.co/iGhzqT/atach_6.png');
height:6000px;
background-repeat:no-repeat;
background-size:contain;
width:100%;
}
<body>
</body
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 months ago.
Improve this question
Does somebody know how to make this happen? Im thinking about something like on the fireship website, but didn't manage to recreate it.
Thanks.
I pulled this from the source code:
body {
background: linear-gradient(176deg,rgb(18,24,27) 50%,rgb(32,39,55) 100%);
min-height: 100vh;
background-attachment: fixed;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
Good day everyone! I am trying apply a background image via an image link but I do not know how to make it work. Does anyone know how to make this code works. Thank you.
background-image: url("https://www.logodesign.net/logo/building-on-crescent-4303ld.png?
size=2&industry=company")
You are not supposed to use HTML for setting a background image. You should learn css.
But here is an example if you want a taste:
<div class="your-class">
<style>
.your-class{
height: 500px;
width: 500px;
background-image:url("https://www.logodesign.net/logo/building-on-crescent-4303ld.png?size=2&industry=company");
background-size:cover;
}
</style>
Instead of exporting via html, you can do it with css operations.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have set the header image to not repeat. However, I'm trying to make the website responsive. When in a smaller browser the image begins to repeat.
screen snip of website header background
header css
media query
The property is no-repeat not none, e.g. :
.bg-image {
background-repeat: no-repeat;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm having problem with duplicating body area, wchich looks like this:
How to fix it?
You can change the background-size to fit the whole element by using background-size:cover .
body {
width:100%;
height: 600px;
background: linear-gradient(red, yellow);
background-size: cover;
}
this should fix it, the background will only show once
body {
background-repeat: no-repeat;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I cant seem to make the background in mobile to be fixed.
I tried the following:
.customBackground{
background-image:url('planwallpaper.com/static/images/3d-balls-hd-wallpaper.jpg') !important;
background-size:cover !important;
background-repeat:no-repeat !important;
background-attachment:fixed !important;
}
Btw..i'm using a platform..called..dudaone.. its a multiscreen platform..what i want to know..is why the background-attachment:fixed !important; not working on mobile and tablets.
But it didn't help.
What am I missing?
Not exactly sure what's happening in your code, so here's a general solution:
If you've set a background on your element like:
body {
background:url('../images/img.jpg');
}
You can then use a media query to set background-attachment: fixed; on your element only on a specific screen resolution (i.e. mobile) like so:
#media only screen and (max-width:768px){
body{
background-attachment: fixed;
}
}
If you want to read more on media queries, you can check out MDN's page on it.
I hope this helps. If you could post your code it would make it easier for us to help, since we would be able to see exactly what's going on.