I'm trying to find a way to extend the grey background of the form on this page past the top and bottom of the background image below, so it looks like it sitting above it.
https://www-databeat-net.sandbox.hs-sites.com/-temporary-slug-63cfc60c-4815-4281-a89c-33528a74a424?h...
I have tried changing the overflow visibility of the container to visible, but then the background image doesn't fill the height of the container.
I'm looking for the grey background to extend slightly beyond the top and bottom of the background image behind.
Any ideas on how to do this are appreciated!
Thanks!
You just need to remove the border-top from your .glfoot-footerbackground class. like this:
.glfoot-footerbackground {
background: #282828;
width: 100%;
bottom: 0;
height: auto;
min-width: 20rem;
float: left;
box-shadow: 0px -2px 15px #ababab;
}
Related
I'd like to know how to set different height to a div and make it responsive. I'd like to have the div with set to 100% but the left side of the div should have the height of 100px and the right side of the same div should have 120px in height. When you scale down the browser the different heights should remain even on mobile phones. Yes, there will be content in it..
#myDiv {
width: 100%;
height: 100px;
background-color: #ffffff;
border-left: 200px solid blue;
border-right: 100px solid blue;
border-bottom: 10px solid green;
}
My tries doesn't work and yes, I have googled without any luck.
The div has a shape of square or a rectangle not other so it is much better to make an image for the background and then use it like
#background
{
background-image:url('image.png');
background-repeat:no-repeat;
}
Your code just sets the left and right border's widths, which doesn't work out in your case. The best way is to use an image and put it in the background, without a repeat.
.bgDiv {background: url("bg.png") center bottom no-repeat;}
I am trying to get a background image to display in the bottom right corner of a div (or asp:panel) but I believe that the display:inline-block is causing it to not show. That is required because I have multiple boxes horizontally aligned on the screen (without it they display vertically).
css:
.showIcon{
background: url('Images/icon.png') no-repeat right bottom;
display: inline-block;
box-shadow: 2px 2px 2px #808080;
}
Is there something wrong with the css?
I do have a table displayed within each div, can that be the reason?
There is no problem with your code. And also as you asked, no table won't make any difference.
See this fiddle with your code: http://jsfiddle.net/3V8m9/2/
The only thing I added is the dimensions: height: 100px; width: 100px; to illustrate.
There can be two scenarios. One, either your image path is not correct. Two, width/height may not be adequate enough.
If you believe display:inline-block is the issue. You can always use float left to align each against each other.
CSS
.showIcon{
background: url('Images/icon.png') no-repeat right bottom;
float: left;
box-shadow: 2px 2px 2px #808080;
} code here
I'm implementing a simple ribbon-like heading that extends off the content area (both left and right) displaying a 3d effect with an image background (no css3 tricks).
I tried floating, negative margins and finally relative positioning but my problem is that all the solutions I tried increased the content's scrollable width (extending it to the right). I'd like to keep my ribbon as a "background effect" keep the content's scrollable width.
Check out my simplified working example: http://jsfiddle.net/c5cVG/16/
body {
background: blue;
}
body>div {
width: 200px;
margin: 0 auto;
background: white;
}
body>div>p {
padding: 5px;
}
body>div>h2 {
overflow: hidden;
padding: 10px 20px 5px;
background: red;
width: 190px;
left: -15px;
position: relative;
}
If you set the viewport width below 215px, you can see that the left-edge extension of the red "ribbons" stay outside of the viewport, and cannot be scrolled inside using the horizonal scollbar.
I'd like to get the same effect on the right-edge extension (overflowing the white area), but it pushes the right edge of the scrollable area and makes itself scrollable.
Any help or demo would be appreciated.
OK, I found a solution that looks fine for me in this thread: https://stackoverflow.com/a/2650215/2084434 (answer by Nikolaos Dimopoulos)
Wrapping the whole content in another div and applying
#wrapper {
width: 100%;
overflow: hidden;
min-width: 200px;
}
works OK.
Here's the updated fiddle: http://jsfiddle.net/jJaxp/2/
I'm positioning a small image in the corner of the background of a div. I want to include it in a sprite but I'm not sure how to set the size of the image from the sprite. My only solution I can think of is to place the image on the absolute bottom right corner of the sprite to force the size. A better solution. Here's the CSS so far:
background: url(images/fod-sprite.png) 99% 99% no-repeat #000;
background-position: -4px -154px;
Use the :before pseudo-class:
.test:before {
content: "";
float: left;
width: 16px; /* requires width */
height: 16px; /* require height */
margin: 0 5px 0 0; /* specify margin */
background: #000 url(images/fod-sprite.png) -4px -154px no-repeat;
}
Put the img within a span that's absolutely positioned, affix it to the lower right, then use the clip property to set the size from the sprite.
Here's the fiddle: http://jsfiddle.net/bengundersen/BSswy/
Edit: You can do this without the span as long as overflow is set on the parent div.
Another benefit of using a clipped img is that you can still print.
My website (http://www.webbuddies.co.za) works perfectly, but when viewed at 1280x1024 resolution, there's a bit of white visible at the bottom of the page that I'd like to get rid of.
The background is a gradient image and rather than recreating the image, I want to just change the color of the background to match the bottom of the gradient. Can this be done?
Here's my CSS:
body {
background: transparent url("Images/Background.png") repeat-x;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
If I change transparent to a color, the image disappears... any ideas?
Thanks in advance!
You can just use the background-color attribute in your CSS, setting the color to the bottom color of your image. For example:
background-color:#00ff00;
simply set an additional background-color like this:
body {
background-image:url("Images/Background.png");
background-repeat:repeat-x;
background-color:#999999; /* << inset your gray here */
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}