I'm created a sitemap for a website I'm developing and I'm having some trouble stretching a background image across the entire screen as shown in this screen shot. Screenshot
As you can see, there is a border along the right side and the bottom that I'm trying to get rid of. The markup I'm using is
#sitemap {
background-image:url(images/gradient-sitemap.png);
position: relative;
left: -10px;
top: -1px;
width: 100%;;
height: 225px;
}
Try to remove all from your body tag and HTML
html, body{margin:0px; padding:0px border:0px}
set the width to 101% and the height to something more than the current 225px
Related
I have 2 images left and right from center which are placed nicely, but when the screensize is < 1920px, a scrollbar is created because the right image is going "out of the Site". I just want it to be cut to the screensize / go over the side of the screen without widening it.
CSS of the images (simply placed in the body):
#fans_l {
position: absolute;
text-align: left;
margin-left: -955px;
margin-top: -228px;
z-index:3;
}
#fans_r {
position: absolute;
text-align: left;
margin-left: 399px;
margin-top: -228px;
z-index:3;
}
Body css:
body {
height: 100%;
width: 100%;
margin: 0px;
background-image:url(p/back.jpg);
background-repeat: repeat; text-align: center;
}
In this case, there are a few things you can do. The first two that come to mind are as follows:
You can declare in the body css that the overflow-x property be set to either none or hidden, effectively cutting off your excess pixels. Though, at a fixed image size, this may not be desirable on smaller browsers. Keep in mind that many people have monitors smaller than 1920px.
You can use a nifty little tool present in CSS3 called Media Queries. With them, you can change css rules based on a monitor width or height. Using this method, you can ensure that it appear full on all sizes of browser windows.
I am a 3D artist by profession, however I have recently been trying to create a website for myself from scratch. My needs are very simple - a widescreen website which consists of a background image and thumbnails which once clicked load a overlay pop up showing further information on that particular content. The pop-up overlay is not the issue here.
My current problem is that I need my page to always be 100% of the browser width, so that means it must scale - along with all the content (thumbnails) in it. I created my first attempt on a screen which is 1920x1080 and the result was perfect, however - when I loaded it on my laptop which has a 1366 screen, it resulted in only showing me a slice of the full page, and gave me scroll bars to view the rest.
I am placing the thumbnails via px as I have got the values from Photoshop but I understand that my needs can only be accomplished via % - how can i overcome this?
Here is a visual of my setup http://i.imgur.com/ZdgTRYk.jpg
Grey is browser window
Red is background
Green is content
Everything should scale at the SAME rate.
Here is my HTML
<body>
<div id="background">
<img src="images/background.png">
<div id="box3thumb">
img src="images/box3thumb.png">
</div>
</div>
</body>
and my CSS
#background {
position:relative;
left:0px;
}
#box3thumb {
position:absolute;
left:514px;
top:117px;
width:92px;
height:200px;
}
I really appreciate any help I might recieve on this.
Thanksm
Elliott
ok, for your #background, you can use this css to scale the browser:
#background{
width: 100%;
background: red;
}
and for your thumbnails, I don't understand very well how you want them placed, but according to your image, you'll need to put them inline:
#thumbnails{
display: inline-block;
margin-left: 15%;
}
The % of the margin may vary depending on what you want.
If you set the body and html elements of your page to
CSS:
html, body
{
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
This will prevent scrollbars from appearing, while maintaining the full width and height of the screen, regardless of resolution. As for your thumbnails, if you have a set number of thumbnails then you can set the widths of your thumbnails to say, 10% width and height with a margin: 1%;, this will allow you to fit roughly 64 thumbnails, but they will get small if the user has a shitty resolution.
.thumbnail
{
position: relative;
display: inline-block;
width: 10%;
height: 10%;
margin: 1%;
}
EDIT ------------------
With large thumbnails like that you could make it more like this:
.thumbnail
{
position: relative;
display: inline-block;
width: 20%;
height: 20%;
margin: 5%%;
}
Use in style.css
#background{
width: 90%;
background: red;
}
/*thumbnails*/
#thumbnails{
display: inline-block;
margin-left: 10%;
vertical-align:text-bottom;
}
I have added a logo next to my menu bar, but anytime I minimize the browser window it moves and juts behind the menu tabs. I would like it to stay put no matter the size of the browser window.
Here is my HTML code for the logo:
<div class="headerlogo"><img src="http://passionpreneurenterprises.com/kerrizane/wp-content/uploads/2014/06/kerrizane2-small3.jpg"></div>
Here is the CSS speaking to the logo (I am using Thesis 1.8.4 so that's why the .custom is included):
.custom .headerlogo {
width: 236px;
margin-left: 160px;
margin-top: 0px;
position: absolute;
top: 5px;
left: 0px;
}
Also, here is the CSS code for the menu bar that is next to the logo:
.custom .menu {
margin-top: -474px;
margin-left: 165px;
width: 950px;
margin-bottom: 11px;
}
And here is the CSS code for the header image that is below the menu and the logo:
.custom #header_area {
background: none repeat scroll 0 0 #03989c;
height: 100px;
margin-top: 475px;
}
.custom #header_area .page {
background:transparent;
}
.custom #header {
background:url('http://kerrizane.com/newsite/wp-content/uploads/2013/10/Kerri-Zane-Header.png') no-repeat center transparent;
width: 1265px;
height:400px;
padding-top: 0px;
margin-bottom: 26px;
margin-left: -140px;
border-bottom:0;
}
Here is a link to the site: http://passionpreneurenterprises.com/kerrizane/about-kerri/ if your browser is maximized, you'll see the logo on the top left and the menu to the right of it. But if you minimize your browser window, you'll see that the logo moves and sits slightly behind the menu, which is not what I want. If I can find a way to make it stay put, that would be ideal. Thanks for any help you can give.
UPDATE: I see what was happening, when I was signed in and viewing the site, the admin toolbar was across the top of the site and making things look off when I was trying to position them. So I've removed the admin toolbar and put the logo where it's supposed to go....
BUT, there's still a problem. When I view it on my PC without the admin tool bar, here is how it looks:
The picture above is how it's supposed to look. But when I view it on my phone, here is how the logo appears:
Any suggestions on how to fix this? I have also updated the CSS code of the logo to depict the recent changes I made. Thanks.
Your current page seems to be different than the code you've posted, but see if this helps.
Most smartphones will try to scale images so they fit the screen, so if this isn't giving the result you want, you want to override this default behaviour and tell the smartphone what to do.
Try editing the CSS for your header image to something like
#teaser-image{
margin:0 0 10px 0;
width:90%; /* force image to scale on narrow viewports. to get the results you want, play with this percentage and or the margin values above or a margin on the page */
max-width: 1265px; /* set max width for image */
}
Good luck!
I ended up finding an answer to this in another forum. I needed to adjust my .headerlogo CSS code to include "position: relative" instead of "position: absolute" (the "position: absolute" was part of the original CSS I posted above in my question). Wanted to share in case anyone else came across this problem. The corrected code I used is as follows:
.custom .headerlogo {
height: 71px;
position: relative;
top: -240px;
width: 200px;
}
I'm trying to create a full screen html template like this image(center of page):
in the pointing of man and some other points, i want create a click ables button, but because image full screen and fixed position, button in another screen size get other position.
my code for full screen image:
html, body ,form
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
min-height:100%
}
.fullscreen
{
z-index: -999;
height: 100%;
position: fixed;
width:auto;
padding: 0;
margin: 0;
}
<img src="source/fullscreen.jpg" class="fullscreen" />
how to fix this problem for all screen size just with css? and center fullscreen image?
You can set "margin" property - CSS, of all those buttons with respect to their respective positions.
Your problem of centering an image both horizontally and vertically is well documented at CSS-Tricks:
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
One of the examples (which is close to what you want and doesn't have the drawback of having to know the image dimensions in trying to use the method):
html {
width:100%;
height:100%;
background:url(http://i.stack.imgur.com/5qSmX.jpg) center center no-repeat;
}
Which looks like this in action:
http://jsfiddle.net/ukVNS/
Consult the link cited for the other methods.
I'm in the midst of making a navigation bar. I came here earlier and got some help re-organising and coding said item. All seemed great and it seemed like it should work but when using the following code instead of each image resizing, it only showed X% of the images height and Y% of the images width. I cannot figure out what is going wrong.
CSS:
#navbar a.newr:link { background-image: url('newr.png'); display: block; width: 5%; height: 2%; }
#navbar a.newr:hover { background-image: url('newrhover.png'); display: block; width: 5%; height: 2%; }
Please refer to how it looks looks on my website to see what I mean.
Please also refer to my other navbar question.
Thank you.
Background images don't resize. They are shown in full size and are clipped if the container is smaller.
What you can do:
The best approach is to resize the images to the target size
A hackish approach is to use absolutely positioned <img> tags as background and <span> text as foreground.
<div class="hasBg">
<img>
<span>text</span>
<div>
.hasBg{
position:relative;
}
//will autofit depending on how span stretches the container
.hasBg img{
position:absolute;
top: 0;
bottom: 0;
left: 0;
}
.hasBg span{
position:absolute;
}
A native but new feature is to use the new CSS3 background-size. but this is not cross-browser afaik
Since you've done it as a background image, the width and height attributes only apply to the div, not the image.
You have two options.
Resize your images to fit the dimensions
have your images on your page and use javascript for your hover effect