I'm creating a pop-up with a background image from CSS as below
#gui-01-Qa {
background-image:url(path/to//file.jpg);
background-repeat: no-repeat;
background-position: top left;
}
This all works fine apart from (what looks like) a boarder of approx 5px being added. It's not coming from my code, but both IE and Firefox are adding it. So whet's it coming from ????
Any ideas would help
Many thanks
Giles
That border is most likely a padding or margin on the body element. Just add html, body { margin:0; padding:0;}, or use a CSS reset.
If you're wondering how to stretch a background image to fill the entire window regardless of resolution while preserving the aspect-ratio A List Apart recently published a very good article on the subject.
Maybe the element with your CSS ID "gui-01-Qa" is causing the border. Try to set margin and/or padding to 0.
Related
Problem occur on Sambungs tables. I have background image set on body.
Css look like
html, body{
background: url('img/background.jpg') no-repeat;
background-position: top; // i tried also cover, fixed etc
}
Webpage is quite high, like over 2000px , where background image takes first 600px, and it could be fine for me, but when i click to hide some box on the bottom of the page, background will automatically appear at the visible part of a screen and it will be eareased from the top of the page. Page isn't realoading during hiding boxes on page, that's why I don't really know how to solve this problem.
Any suggestions ?
Problem solved. I had to input background into div#wrapper. It solved my problem with rendering of background image
I have a bar at the bottom of the website for certain content. The problem is that it's currently not extending (width) to cover the entire screen despite the code to do so.
HTML is rather basic
<div class="bottom-ulity">
other content goes here
</div>
CSS:
.bottom-ulity {
height : 57px;
width : 100%;
right : 0;
position : fixed;
bottom : 0;
background : url('../images/inner-show-text.png') repeat-x left top;
z-index : 1000;
}
I have tried giving a min-width: 100%, tried adding the 2046px as min-width. I looked at some other pages and saw recommendations with "background-size: 100%" and "background-size: cover". Both of these lines of code give the same result, it makes the image itself extend properly however it loses all its effects such as the gradient and instead gives me a basic gray color.
I tried deleting all the divs inside to see if the code inside was causing this, but that wasn't the case either. When I added "background-repeat: no-repeat;", I noticed that the image would only show up once and it wasn't extending at all, leaving a massive gaping hole on where the bar is supposed to be (zoomed out far enough obviously).
Here's an image showing the issue:
I found a hack for the problem, at least one that will be good enough temporarily. I decided to add background-size: 100%
to the css which seemed to fix the problem until I started to zoom in. While the image itself was one and extended 100% in width as it should have, it would start to move up the screen despite being a fixed position with bottom and right set at 0. What I decided was to add
background-size: 200%;
This fixed the issue though that border that is part of the image obviously is twice as big at the moment, which means while it works perfectly, the border being twice as thick it doesn't quite as elegant.
UPDATE: A fix to that solution is simply lowering the px that will be duplicated if the img allows in half. Since the background-size is at 200%, it means everything is multiplied. So if you have a different % to fix a similar issue, keep in mind how many pixels you had before making changes.
I am trying to add this 3D image as background to the content of a wordpress website
This is the theme demo I'm using
I would like the header part to stay the same size on all pages, the same goes for the footer. But as the body changes from page to page, I would like it to change accordingly but still fit properly to the header and footer part of the whole image.
The problem with this background is the fact that it not symmetrical, so the top & the bottom of the body image suppose to include the top & the bottom of the canvas (the middle part of the image)
I tried different techniques to implement this solution, but couldn't figure it out. The issue is that the body part of the image doesn't repeat-y so well, as it changes throughout the height of the image,
I would appreciate a solution, and it doesn't matter for me if I have to cut the images to a several parts.
Thanks
If you are lucky, you can do something with border-image.
This CSS, for instance,
body {
width:100%; height:100%;
-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
margin:0;
border-width:63px 40px 133px 40px;
border-style:solid;
border-color:brown;
border-image-source:url(http://webbos.co/vibration/wp-content/themes/vibration-child-theme/images/back1.jpg);
border-image-slice:189 120 399 120 fill;
}
sets the borders to a fixed width (in this case 1/3 of the width of the sides in the image) and distributes the rest of the image over the body background.
Then all you need to do is position the header and footer on top of the border of the body...
Fiddle.
Disclaimer: I've tested in Firefox and Chrome. MDN says it won't work on any other browser.
I have a webpage in which I want to set height of head to 60px, but somehow its inner elements overflow and thus it doesn't show right. I'm suspecting that the logo's background is somehow setting the height to be bigger than it should be. I'm specifically setting background-size: 202px 56px; and height:56px;. The original height of background image is 250x69px and it should be resized to (auto calculated)x56px (or fixed 202x56px would be ok too).
If this would be displaying right, there should be a small 'border' on the bottom which turns blue when its corresponding top element is hovered.
The styles are originally written in SCSS with help of Compass and compiled to CSS. I've also used Compass to generate sprites. I've only provided CSS files on webpage. I'm not putting any code here because it's too large (200+ lines in each file). If I have to show SCSS files, please let me know.
The webpage I'm editing can be found on this address: http://stogrebro.com/page-test/
I'm originally creating this webpage on localhost so there might be some broken links. If there is anything important missing, please let me know.
i made some tries with your page and found out that the "over-height" of your <td> elements is due to the padding for anchor elements inside <td>. You have first to put it to 0 and then to apply the other paddings for left and right you are using:
#head table td a{ padding: 0px; }
Moreover you can just set the height directly to the <div id="head"> and set it with hidden overflow (which also makes the trick but lets <td> with wrong height).
#head{ height: 60px; overflow: hidden}
The background-size works fine and doesn't make any mistake.
Hope it helps you.
I am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.
Here is a sample link to the page itself: [click here][2]
I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?
You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.
Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.
That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.
Anyway, the code you want is
#imagewrapper
{
width:1422px;
margin:0 auto;
}
The second line makes it center on the screen.
P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.
To solve the problem just set the "width" property in #imagewrapper :
#imagewrapper {
width: 1430px;
}
Have You tried setting up width attr on the parent element to around 1800px?
div#imagewrapper {
width:1800px;
}
It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors.
To make it look nice I guess You should apply that attribute to the body tag.