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 6 years ago.
Improve this question
Recently I rebuild the Spotify home page using pure Javascript and scss to test my front-end study, Here is the link.It's not finished yet.
You can see the the difference between mine and the real one is the big-background, the markup is
<div class="bg-main">
<sceiotn class="can-see-the-background-image-1"></section>
<sceiotn class="can-see-the-background-image-2"></section>
</div>
I gave the section rgba(rgb,0.7) background,You can see the effect is not that bright as the real one,which can see the back albums clearly.I dig into their source code,But I didn't find the trick.
Solution
First, add the gradient to the background property on your element <div class="bg-main">:
.bg-main {
width: 100%;
height: auto;
background-attachment: fixed;
background: url(../img/bg-albums.png) repeat,
linear-gradient(50deg, rgba(255, 65, 105, 1) 0,
rgba(124, 38, 248, 1) 100%) repeat
position: relative;
}
Then, in your element <header class="header"> remove the gradient from the background property:
.header {
height: 760px;
width: 100%;
text-align: center;
}
Explanation
The reason Spotify's is clear to see is because the background colour gradient is on the same element as the image. So the image is superimposed on top of the background gradient.
On your site you have the image underneath, and then you place a faded background over the top - making it more difficult to see. With the image on top of the gradient background, it makes the album art much clearer and easier to see.
final result
Related
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 want to add 3 green circles with the :before pseudo-element in order to show the in-stock-status of my products similar to below:
http://www.chililips.com/LACOSTE-Lounge-Pant-Schlafhose-lang-gruen
I only know how to apply ONE circle, but how can I add three or more? I also thought of using HTML characters, but there are no green circles...
Box shadows...no pseudo-elements required. Unless you want to.
.blob {
width: 50px;
height: 50px;
background: lime;
border-radius: 50%;
margin: 3em 15em;
box-shadow: 5em 0em 0 lime, 10em 0em 0 lime;
}
<div class="blob"></div>
If you are using font icons you can simply add like single one instead of three same content
.fa-circle:before {
content: "\f111" "\f111" "\f111";
}
This is an example of fontawosome icon,you can manage space between icons by letter-spacing
OR
If you are using image for icon, then just take image with three icons or use multiple background images like background: background1, background 2, ..., backgroundN;
Read more about multiple background images
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 7 years ago.
Improve this question
Please how to do this chart in HTML and CSS ??
Where the circles are buttons ..
Use the following:
Your basic circle:
.circle {
width: 100px;
height: 100px;
border-radius: 50px; /*Make it a circle (border-radius = 1/2*width & height)*/
background-color: hotPink;
border: none;
}
<button class="circle">Motion Detection</button>
<!-- Using a button to generate the circle -->
Then use position: absolute; with the left and right properties to position the circles.
Have a `Live positioned in the middle of your page with:
<style>
#text {
font-family: MyFont, sans-serif;
color: white;
}
<style>
For the lines I would use divs, and give them a height of 2px and a width of what ever (350px for example.) For the positioning, again use the position property (learn how to use it here: w3schools.com/css/css_positioning.asp) – joe_young just now edit
Use the above to help you create what you want, but as has already been said,
This is not a code generating service, try yourself and ask questions about the code you're having trouble with.
In other words, have a go, come back to us when you have tried and have a specific problem.
Good luck
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
My background image, which covers the entire web page, overflows past the HTML and body elements, even though they're both set to 100%.
It's a simple page, as seen here.
I've tried several different techniques to place the background image (including setting it to cover, but I still encounter this overflow issue)
(I feel like I'm going a little crazy, but I'm probably missing something that's very apparent).
Try overflow:hidden
.translucent {
width: 100%;
height: 100%;
background-color: rgba(0, 92, 60, 0.95);
overflow: hidden;
}
I wonder why you set this in the body tag.
It's much easier to give the body tag a background-image.
So i changed your body css style to this:
body {
width: 100%;
height: 100%;
background: url('cover-plaza-707-fifth-construction.jpg') no-repeat center center fixed;
background-size: cover;
position: fixed;
}
And you now can delete <img src="cover-plaza-707-fifth-construction.jpg" id="bg">
I hope this solves the problem, i haven't tested the scrolling yet.
[After reverting it back to a cover background image rather than the standalone image I placed with reduced z-index as a bug fix]
Setting .translucent's min-height to 100% (rather than just height: 100%;) fixed the issue.
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 9 years ago.
Improve this question
I tried to solve my problem searching through the various questions already posted, but I have not found one that is made for my
I'm creating my new website using the "responsive" technique and now I'm missing just one little thing:
I enter inside a DIV a background image
The DIV should have a width of 100% to fill the entire page, and I have to make sure that the height of the DIV that contains the image will auto resize when resizing the page.
If you want the image to retain the width and height of the containing div, use:
background-size: 100% 100%;
The image will distort, but you may not mind.
If you want the background to be whatever portion of the image is sufficient to cover the
entire div as the viewport changes, use:
background-size: cover;
If you want to ensure that the entire image is in the background with the proper aspect ratio, use:
background-size: contain;
In this case, the image may be tiled to cover the div.
HTML
<div id="thediv"></div>
CSS
html, body {
height: 100%;
}
#thediv {
height: 100%;
background-image: url(http://i.imgur.com/MabCTXH.jpg);
background-size: 100% 100%;
}
Is this what you are looking for? I just added the padding: 5px; and background-color: red; so op can see that the div is 100% wide and is responsive as well as the image
http://jsfiddle.net/hyKCa/1/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
My background Image navbar isn't showing properly. If you notice, the gradient for the navbar doesn't display properly. The top half should be a light gray and the bottom half should be a darker gray. When the page firsts loads you can see it appear but then it all goes gray and loses the gradient look.
My site is usahvacsupply.com and I just edited my background-image to be bigger to fit for a 1600 width resolution. Here is a picture of my background image http://tinypic.com/view.php?pic=20ge8nl&s=5. Any help would be much appreciated.
Here is my css code for the background.
html, body{
margin: auto;
background-image:url('/images/Testing1/bg2.jpg');
background-repeat: no-repeat;
background-position:top center;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
min-width:1600px;
min-height:1400px;
top: 0;
left: 0;
}
Removing the float:left on div with ID lol seems to fix it.
Your table element #body has a background which is obscuring the gradient. Remove it and the gradient in your background appears.
Original
#body {
background-color: #F5F5F5;
overflow-y: scroll;
}
Modified
#body {
overflow-y: scroll;
}