This is a problem with a theme that I bought, and I have already tried to contact the owner (with no luck).
It should be a fairly easy fix, it's just that I can't work out how to do it! (I have done my research).
You can view the theme here: http://igeekify.com/_templates/liftoff/www/
To re-create the problem, just drag the window size so that it is smaller in width than the content, then scroll to the right. You will notice the header background doesn't stretch all the way.
The background image is for the DIV '#frame-header', which has the class '.wrapper'. I believe that the problem has something to do with the width of '.wrapper' which is defined.
Any help is really appreciated!
I think you might need to add a min-width property to the 'frame-header' div:
<style type="text/css">
#frame-header
{
min-width: 940px;
}
</style>
Try using the following code:
image width:100%;
Related
I am using the same template as this one, but their background stays fixed while scrolling the site, while mine scrolls.
If you go to both sites you will see what I mean. I googled and tried inspecting element and came up with this which fixes my problem, but my background isn't responsive anymore.
<style>
.jqbga-web--image {background-attachment: fixed;}
</style>
My site
Any help or suggestions will be much appreciated,.
You should give background to body tag.
Change the below to the div you have applied the Image to..
Change background-image:URL(..) to
background:url("https://image.jimcdn.com/app/cms/image/transf/dimension=2000x1500:format=jpg/path/s851c6cbbc20d5b79/backgroundarea/i3fbea4494e0dd3c4/version/1464635663/image.jpg")center center fixed;
and also add
background-size:Cover;
http://primoburgers.herokuapp.com/
I am working on this website. It looks fine on my laptop, but when I load it onto a bigger desktop monitor, it has a red bar under the html tag at the bottom of the page. This red bar shows under all of the pages. Does anyone know how to remove this?
Thank you for taking the time to look at this!
You need to set your html and body elements to height: 100% first.
After that set top-pic-wrapper to height: 85% or so. % height wont take effect till the other parent elements also have a height set for them.
No need to define a height for your menu pic class.
Just change your class below
.heightMenuPic {
height: auto;
}
I'm trying to make all product images the same height. I feel like I should just be able to add the following to ".product-image":
height: 300px;
width: auto;
position: absolute;
but that doesn't work here.
Here is a link to the page with the issue:
http://www.hothothot.com/shop/product-category/enter-at-your-own-risk-10/
How can I make these images the same size? again, I think that they should be governed by .product-images, but the only thing that seems to work is when I change the more generic "img" for media=All which then messes up other images on the site.
Please help. Thanks!
Remove height:auto; in your code and if you want a specific height on it then use height:50px; or whatever you would like.
img{
border-style:none;
vertical-align:top;
max-width:100%;
height:auto; // <--- Remove that
}
Online tools like picresize are great help in your case http://www.picresize.com/. You can resize the images so even with height:auto; it would work perfectly.
You can reference them via
.product-images img {
// css here
}
There appears to be no class called product-image, so this references any image within the a tag with the class product-images.
However, increasing the height when all the images are different sizes and the outer tag has a max-width may well lead to some images being stretched and looking odd.
Stretching small images can also make them quite blocky.
If the idea is for a tidy alignment, you are probably better setting a height on the .product-images tag and making the images vertically align within it.
(Also, the simplest way to make them the same size may well be to edit the images and upload them the same size)
The product-image class is on the link that surrounds the image.
The image itself has two classes: attachment-shop_catalog and wp-post-image.
So, you could try something like this:
.attachment-shop_catalog .wp-post-image {
height:300px;
}
The other issue is that the img has width and height specified in the html.
To make sure the image scales properly you should set the width to auto.
Try something like this:
.attachment-shop_catalog .wp-post-image {
height:300px !important;
width:auto !important;
}
I added !important so that it will override the hard coded html dimensions.
Hope this helps
Not sure how to best ask my question. And I can't yet post screenshots. :( This issue does happen in mere current coding practices. You can currently even see this issue happening on Facebooks home page.
Here's my URL:
www.alpacanation.com
How to replicate live
Grab the right hand side of your browser and pull inwards. Eventually a scroll bar appears. Not necessarily bad. As I have a fixed with here. However… Notice the scrollbar is the length of the background color up in the top of my header which is actually creating a "Curtain" like effect.
Make matters worse:
If on other high level parent elements like .Footer or .Page you play around with overflow and position relative the curtain will then begin overlaying on top of the entire site.
Check out Facebook: They often have this issue as well. Obviously most don't notice it as it's not going over top of the content.
In either case I know there is something not right.
Help appreciated!
Add something like this to your CSS:
body { min-width: 980px; }
You have min-width: 980px; set in many of the elements on your page, but not on html, body, or .container. Once the viewport is smaller than this, these elements will overflow html and give you the scrollbars you're seeing.
But this doesn't make html any bigger. It--and its background--is still at the viewport size. This is why you get the "curtain" effect when you scroll.
Setting width: 100% on html doesn't fix this; this only sets html to 100% width of the browser window. If you're going to use min-width, make sure you you don't just apply it to elements that hold your content, but also those that have your backgrounds.
to fix this, add
html, body {
min-width: 980px
}
in your www.alpacanation.com/styles.css:40, then you are done. :)
EXPLANATION: the problem is this container,
<!— stat container —>
<div class=“container”>
<!— START FOOTER MENU SECTION —>
that container has width:980px which screws up the view because it forces that container to stay at 980px wide while the rest is shrinking, thus creates the ‘curtain’ like effect.
SOLVED
I used the solution proposed by Roman below, based on adding an additional DIV with position:absolute, I tested it in IE7, IE8, IE9, Chrome and Firefox and seems to work fine!
So the layout now has 3 full background images (what I needed), and even you can use the BODY bg taking care of that will be cutted off to the browser's viewport height (still could be useful in some cases), "three and and a half" bg images with "sticky footer" :)
The only drawback I found its that the links in the #footerContent were not "clickable", I solved it using position:relative to this container.
I made the changes to the sample I provided and uploaded it to my Dropbox, In the case that someone else could find it usefull.
Thank you all for your answers.
http://dl.dropbox.com/u/512412/html_stackoverflow_solution.rar
I uploaded
I'm building a quite complex layout for a website where I need to have 3 background images covering the background of the web page. So I have one in the HTML style, one in the BODY style, and the final one in a DIV that it's the container for all the webpage elements (#contenedor)
I'm also sing a "Sticky footer" technique, to have the footer "glued" to the bottom of the page whern there are small contents in the "main content" area.
The problem that I have It's that the BODY bg image gets cut off to the viewport of the web browser, I mean, It doesn't repeat-y below the visible area displayed when the page is loaded, and the contents are "tall" enough to make the webpage scroll.
What I tried until now:
To add an additional container DIV surrounding all (that's ok for me), but doing that It brokes the "Sticky footer" (maybe I did not found the right way to do it... I don't know).
Force the BODY to be as tall as the HTML using:
html>body {
min-height:100%;
height:auto;
height:100%; }
This solves the BODY issue, the image repeats but this also breaks the "Sticky footer"... :(
You can see a sample:
Index with "small contents" all OK... footer on bottom, etc.
http://carloscabo.com/bg/index.htm
Index page with tall contents (simple BRs), scroll down to see the cut on the BODY bg Image
http://carloscabo.com/bg/index_tall.htm
You can also download all the files of this sample in the following URL to do your own local test.
http://carloscabo.com/bg/stackoverflow_html.zip
For a reason I don't quite catch, it seems that the body is stuck with a height of 100% of the viewport. It refuses to grow past this point, and does not inherit the real height of the whole page.
However, if you don't mind to add another helper div, you can easily solve the problem.
First lets start with the html:
- Add a helper div before the head section.
<div id="contenedor">
<!--HELPER DIV GOES HERE: BACKGROUND FIX-->
<div id="bgfix"></div>
<header id="arriba">
...
</header><!--header#arriba-->
...
<div class="push"><!--Sticky Footer Push--></div>
</div><!--contenedor-->
And now let's modify the CSS:
- Remove the background from the body, and put it into the new helper div like so.
body {
height:100%;
min-height:100%
text-align:center;
// background:url(../img/bg_body.png) center top repeat-y;
color:#fff;
}
#contenedor {
position:relative; /* For #bgfix to attach here */
...
}
#bgfix {
background:url(../img/bg_body.png) center top repeat-y;
position: absolute;
width: 100%; height: 100%;
z-index:-1;
}
And VOILA!
Hope it helps!!!
The solution I found for this problem is to set min-height to the
min-height: 900px;
900px was the actual height of the background image i used.
I would need to see exactly what do you want to accomplish in order to help you better,
but i will make my best giving you some tips in advance
you shouldn't be applying a background to the HTML tag.
dont play with the height property of your body, it will mess up the sticky footer, instead let body height grow naturally with content.
body will grow with the content, but html wont. html tag IS NOT a container.