I have a problem with my site.I cant make the table appears on the img. It appears down of the image or up of the image. I need some help with the codes. Actually i dont want the img to reapet and to fit in users window everytime. The code to insert the img is this
<body oncontextmenu="return false;" background="bg_body.jpg">
And the code that a actually helped me but didnt solved the problem 100% because table didnt appears with img is this
<style> <!-- body { margin: 0px; } --> </style>
<img src='whatever' style='width: 100%; height: 100%;' />
if you want a background image to fit the size of the browser (which i'm guessing at, but if you have a 100% height and width on your image, that seems what you're after), you could do something like this:
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%;}
.backgroundlayer { position:absolute;top:0;left:0;z-index:1; }
.toplayer { position:absolute;top:0;left:0;z-index:2; }
</style>
and then in the body of your code...
<body>
<img src="someimage.png" style="height:100%;width:100%;" class="backgroundlayer" />
<div class="toplayer">
my content above the image...it doesn't have to be a div...use a table if you want
</div>
</body>
Consider using CSS background properties.
HTML (something like this, un-tested):
<body ... style="background-image:url('bg_body.jpg'); background-repeat: no-repeat;">
If you want your background image to "resize" to the browser, you will have to hack it to work. One common way is probably to use two div tags; the first one will contain the image at 100% size, with absolute positioning. The second one contains your actual body content, with a higher z-value. It is a lot more work than you might think.
For detailed discussion on this, see this thread: http://www.htmlcodetutorial.com/help/ftopic4503.html
There is a couple things here that don't make too much sense:
"oncontextmenu="return false;" are you trying to run some sort of javascript? If so, you need to call a function before the "return false", like so:
<body onload="someFunction() return false;">
Also, I don't think you can set a background for an element the way you did it, it would be more like this:
<table style="background:path/to/my/image/...">
I'd love to help some more, but please explain yourself a little better.
ok, I'd suggest you do something like this:
Whether it is on an external style sheet, or embedded inside the head tags, you can set the image size with some simple CSS, like so:
<style type="text/css">
body{
background-image:url(../path/to/image);
background-repeat:no-repeat;
height:100%;
width:100%;
}
</style>
Try this to see if it works, I'll help you more if it doesn't.
Related
This is my first question and first website ever, a total beginner so I hope I'm doing it right :)
I made a table with pictures. I added height and width to each, like this:
<td>
<img src="numbers.jpg" title="Numbers" width="300" height="300">
</td>
It worked, but then I tried to delete the sizes and use my external CSS file instead. So i changed it to:
<td>
<img class="topics" src="numbers.jpg" title="Numbers">
</td>
And then added in the css file:
.topics {width: 300px;
height: 300px;}
It didn't work, and the pictures are now showing with the original size of the picture file itself. I also tried adding the class to the "td" part instead of the "img", that one didn't work either.
What am I doing wrong?
After being able to do this, with your answers I hope, I'd like another tip for adjusting the pictures to mobile version as well. I tried using percentage (%) and it didn't work. So any insights on that will be great :)
You forgot to say px in the stylings to specify its 300 pixels
.topics {
width: 300px;
height: 300px;
}
Add "px" to your pixel attribute
Be sure to link to your external stylesheet
.topics {
height:300px;
width:300px;
}
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<td>
<img class="topics" src="numbers.jpg" title="Numbers">
</td>
Thanks!
I've just noticed that I forgot the px, indeed.
Sadly, it still doesn't work.
I know the link to the stylesheet is ok since it works on other elements, like the headlines. I'm trying to figure out what else I am missing here...
I want to use multiple images as backgrounds.
For example: index page - car image, about me page - notepad image
I tried to add this code:
body {
background:url(images/big_03.jpg), url(images/big_02.jpg),url(images/big_01.jpg);
background-repeat:no-repeat;
background-size:cover;
}
But I don't know how to switch them. How can I choose which image to use as the background?
Hi you can use a technique call "CSS Sprites". In short, you combine all of your images to one big image by using a sprite generator tool at http://spritepad.wearekiss.com/. Next, you change the background positions within the big image to get the background image for the element.
You can learn more from here
You can add a special class to your body element for each page and specify a different background-image for each case.
HTML:
<body class="home">
...
</body>
<body class="about">
...
</body>
CSS:
body.home{
background: url(car.jpg);
}
body.about{
background: url(notepad.jpg);
}
You can accomplish this by setting each <body> tag with a specific ID and then style those ID's separately in the CSS:
<body id="home"> </body>
CSS
#home{
background-color: red;
//or image, whatever properties you want
}
http://jsfiddle.net/
As far as I know, you have three options:
1) Code it into the HTML. To do this, change <body> in your page to
<;body style="background-image: url(<url of image>); background-repeat: no-repeat; background-size: cover;">.
I see this as sub-optimal because it means a lot of typing in different places, potentially causing inconsistencies if you want to change, say, background-repeat to repeat-y and forget to change one or more of your pages.
2) Use a "mini-stylesheet" consisting of just one rule specifying the background on each page. I don't think that this is a very good solution, because along with the problems raised by 1), you also have to deal with another HTTP request, which slows down the page load.
3) Use different ids on each body element (so your <body> would become <body id="home">, <body id="about">, or anything else. I think that this is the best solution because it lets you collect all the code in one place:
body {
background-repeat: no-repeat;
background-size: cover;
}
body#home {
background-image: url(<home image url);
}
body#about {
background-image: url(<about image url);
}
This code can be stuck in the stylesheet that you link to in all your pages, so you don't end up with any extra HTTP requests. If you want to change one of the property/value pairs for body, you don't have to go through lots of files changing every one, you only have to change one.
If you use static Html u can give class to your body element or outer wrapper. Example :
Homepage
<body class="homepage">
</body>
About Us Page
<body class="about_us">
</body>
and set css
.homepage {
background-image : url('../path/to/image.jpg');
}
.about_us {
background-image : url('../path/to/image.jpg');
}
and so on for each page.
Your current css selection working for global body,
body {
background:url(images/big_03.jpg), url(images/big_02.jpg),url(images/big_01.jpg);
background-repeat:no-repeat;
background-size:cover;
}
This type of css working if u want use multiple BG image on page, not made different BG for each page.
I am new to css and web design so please be gentle ;-)
I was wondering if it is possible to define the background of a page (i.e. what color the screen is) without referring to the tag. So not doing the typical:
body { background-color: #fff; }
I need to do this since I am writing css to stylize our login page, but only have access to the template html to be inserted into the page body. So my html looks something like this (very simplified):
<div id="loginpage">
<div id="title"/>
<div id="content"/>
</div>
I couldn't find any answers online since this seems to be an unusual way of doing it.
So: Is this possible, if yes - how?
How about:
<div style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: #999;"> </div>
(put it above all your other html, and maybe use z-index: 1; if necessary)
You can use the :root selector if you don't mind about losing IE6-8 support.
But have you tried targeting body or html, in spite of the fact that they're not in the code? They still get inserted into the DOM.
In my opinion you need to discuss this with your team members and a superior. If you find a work around you may come to work tomorrow and find that someone has added
body {
background-color: #not-white !important;
}
after your code and your next question is how to override !important in css.
On a side note, whoever made the restriction of not giving you access to css/main template should really not do that. If you continue working like that you'd end up with a lot of workarounds that will likely bite you.
Regardless of the restiction you could add a style tag like so:
<style type="text/css">
body {background-color:#fff;}
</style>
which would take priority over the original body rule (assuming the body flow is not tampered with). This would be safer than setting background colour for * which would have unexpected side-effects. You may also want to set it through the shorthand background:#fff; which will reset any background image etc. previosly applied.
Update
I've just seen your comment
I did do that first (just target body) , but was friendly reminded by
my team members to only style elements that are actually on the page I
am working on... (which is not the case for body).
Assuming it's a valid argument and not some sort of petty tyranny going on, maybe it could be appropriate setting the background on the loginpage element? You could reference elements by ID like so:
<style type="text/css">
#loginpage {background-color:#fff;}
</style>
Okay, I'm not entirely sure how to explain this.. but I will, best that I can.
Okay, So I have this Website that I am working on, and uhh. It over-scrolls.
It's extremely annoying, considering there is nothing there for it to scroll.
here, maybe this will better explain it.
I just want to find out how to lock the scroll bar in the MAIN WINDOW.
Not the text-box. I'd greatly appreciate it if you could somehow help me out.
use your browser's developer tool to inspect the DOM.
there's a huge center element below
and also, right click->view source:
your code starts with:
<HTML><HEAD><TITLE>Q u e b e c.-</TITLE>
<style type="text/css"> body { direction:rtl; } </style></HEAD>
<BODY>
<body><html>.... your html code
increase the size of the HEIGHT: 300px; to 400px; of the div.... or whatever can accomodate the text.
You have three different body elements. Change your first five lines of code to this:
<html>
<head><title>Q u e b e c.-</title>
<style type="text/css"> body { direction:rtl; } </style>
</head>
<body bgcolor="#969EAF">
// your content here
As for your actual issue, you can just set the body's overflow to hidden:
body {
direction:rtl;
overflow:hidden;
}
It always helps to pass your code through a validator. It spots all the issues and makes it easier for you to fix them. Looking at your source code right now, there is A LOT you can do to improve it.
I'd like to add a hyperlink to this background image. Should I create a new class within the stylesheet? (When I attempted to call the new class, the image disappeared).
body{
background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
line-height:20px; font-size:14px;
font-family:"Trebuchet MS";
margin:0
}
EDIT: Now there's whitespace on the top and bottom (created by the new div class?)
You're using a background-image on the body tag. Assigning a hyperlink to it is impossible.
Also, whats stopping you from using it in an img tag? This seems like a semantically valid thing to do:
<img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" />
But, if you must use it as a background image, than creating an additional class is the way to go.
You can place a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you can't hyperlink a background image.
You'd have to do something like:
<body>
<div id='background' onclick='window.location.href="mynewurl"'>
<!-- Rest of page goes here -->
</div>
</body>
Also, add cursor: pointer to the css for the background div so people know it's a link.
OK, I can't tell you if this would be a valid solution, because I would have to see what you actually wanted to be a link. If for example you wanted to make a link to the cream "Boundless" boxes in your background image I do have a work around. It will be a pain to get it correct cross browser, but it's doable.
Make clear gif's the same size as your cream boxes
Put those images in something like this <img src="blank.gif" alt="Link Location" />
Use CSS to make the a tag a block element and place it over the cream boxes in the background image
I would of course clean up my code, it's a mess, but I am sure you can figure that out. Just make sure to have descriptive alt tags for accessibility.
This isn't the best solution, that would be to take the "boundless" boxes out of the background image and place them instead of the blank gifs, but if you HAVE to do it for one reason or another, this option will work.
You're going to have to change your html code a bit to do that. You need to surround the image with a tag, but you can't do that to the <body> tag, obviously.
** EDIT ** Since it's been pointed out my first answer is invalid HTML (thanks, and sorry), you can use a jquery approach like this:
$(document).ready(function(){
$("body").click(function(){
window.location='http://www.yoururl.com';
});
});
The issue with setting up an onClick method, is that you remove the anchor hint at the bottom left of the browser window, as well as any SEO that might be associated with the link.
You can accomplish this with just HTML/CSS:
<style>
.background-div {
background-image:url("/path/to/image.jpg");
position:relative;
}
.href:after {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
}
</style>
<body>
<div class="background-div">
</div>
</body>
In this case, the relative positioning on background-div will keep the link contained to only that div, and by adding a pseudo element to the link, you have the freedom to still add text to the link (if necessary), while expanding the click radius to the entire background div.