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 1 year ago.
Improve this question
I want to create a slope shape on top of my div. The solution consists of main div (with content) and top tiv (triangle shape). For top div i have specified a correct background, clip-path property, and percentual padding top (for fixed ratio on diferent widths). Problem is percentual padding when resulting height of shape in pixel has decimals. The shape has extra white space on bottom. How to eliminate/fill this white space ?
triangle div css props
background: gray;
clip-path: polygon(0 0, 100% 100%, 0 100%);
padding-top: 15%;
margin-bottom: 0;
I am not looking for workarounds. I want to keep both elements and specifying clip-path on rectangle element wont work for me. I am looking for answers how to round the final height after percentage calculation.
reproduction https://jsfiddle.net/vt5pr6a1/6/
Resize result to see problem
Make it only one element
.footer {
background: gray;
/* v-- added an extra point using 15%xsreen width */
clip-path: polygon(0 0, 100% 15vw, 100% 100%, 0 100%);
padding-top: 15%;
margin-bottom: 0;
}
body {
margin:0;
}
<div class="footer">
foter content<br>
here
</div>
Related
This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 9 months ago.
As the title says I am trying to add a gradient background to the one page on my website. I am currently doing this in CSS:
body {
background: rgb(85,205,252);
background: linear-gradient(45deg, rgba(85,205,252,1) 0%, rgba(255,255,255,1) 35%, rgba(247,168,184,1) 100%);
}
But doing it this way makes the gradient jagged and not very smooth.
View on JSFiddle
It should be looking like this
This is because the gradient is repeating over and over. It is doing this as it is the same size as <body>, which is actually very small as there is only that one .intro element taking up space within it.
You can fix this by stopping the background from repeating, and making the body the full height of the window at minimum, like so:
body {
min-height: 100vh;
background-repeat: no-repeat;
}
Edit: technically the 'no-repeat' is redundant when using a gradient background, as it will always fill the height provided the height is at or above 100vh.
However I would leave it there anyway as good practice just in case the background ever changes to an image; or for edge cases where the min-height may get overridden.
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 4 years ago.
Improve this question
I recently started learning HTML and CSS and practicing on making websites. Yesterday after adding margin top/bottom to sections, my header image got bigger than 100vw. I couldn't figure out what is causing this. And today, even removing margin is not fixing the issue.
Project: https://akinunal.github.io/project-3/
Codes: https://github.com/akinunal/project-3
This is an expected behavior.
You set a fixed height and width 100vw for div that has a background image with background-size: cover;. It means that the bg image should fill the whole div. To preserve image aspect ration browser will scale and crop the image without stretching it.
From MDN:
If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
PS: in your case, you don't need width property at all because of div by default has the width 100%.
Change your CSS: Use 100% instead of 100vw for width.
.header-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(images/slider-image1.jpg);
background-size: cover;
background-position: center;
width: 100%;
height: 650px;
position: relative;
}
Because of overflow (content is bigger than container), scrollbar appears. Those scrollbars also take space (50 px), without reducing the VW size.
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;
}
I want to set a body background to 30.08% cream and 69.2% gray. I am doing this with a css gradient. Then I what to have all my articles to be `margin-left: 30.08%;' to meet the line of the background (so the background line, created by the gradient is like a ruler). Here is the code
body{
position: relative;
background: -webkit-linear-gradient(left, #faf4f2, #faf4f2 30.08%, #777777 30.08%, #777777);
}
article{
width: 300px;
height: 200px;
background: red;
margin-left:30.08%;
}
This works great, but as you can see in this jsFiddle example, the article does not always align with the gradients line. So depending on the browser width, it looks sloppy in some cases. In the jsFiddle example, you are going to see the problem I have if you resize the window to 652px (but that is not the only point) . Unfortunately this happeness at so many different points that I dont think a media query would do the job.
Is there a way to fix it?
Thanks
You have given your body width and height of 100%
When you give an element a width of 100% in CSS, you’re basically
saying “Make this element’s content area exactly equal to the explicit
width of its container — but only if its container has an explicit width.”
and then you are using
article{
margin-left:30.08%;
}
30.08% of what?
as said above you should use % only if its container (which in this case is a block level element <body>) has an explicit width.
You can read more about it here..
Read it here
and i have changed your code a bit changing the values from % to pixels
body{
background: -webkit-linear-gradient(left, #faf42, #faf42 90px, #777777 90px, #777777);
color: darker(#77777, 10%);
width:300px; height:300px;
}
it seems to be working now. the values are for demonstrational purpose only. change it according to your needs.
Hope it helps.