I 'm using zen as the basic theme to make a new theme for my site. The problem is i want background images for header and footer that are not getting displayed until i specify a height and width for them.Moreover, the height and width specified in the CSS inside the #header and #footer have to match the exact dimension of the original images (which are dimensionally large) otherwise the images are not being displayed properly (parts of them get cut). Is there a solution (either using CSS or PHP) that would allow me to write the CSS for the header and footer without any dimensional constraints so that the background images self adjust ? The header and footer contain no blocks. A part of the CSS is as follows :-
#header
{
background-image:url(images/header.jpg);
background-repeat:no-repeat;
height:
background-position:center;
}
#footer
{
margin-top:0px;
background-image:url(images/footer.jpg);
height:391px;
background-position:center;
}
#footer-inner
{
text-align:center;
padding:4px 10px 10px 10px;
}
If you want the images to automatically scale, you will need to use an img tag for each image, and set the width/height to 100%. That will scale them automatically to be the same size as their parent container. That means if you want the images to scale according to the size of the browser window, you'll need to set the parent container's width/height to be a percentage, and not a fixed pixel width/height.
Few sites do that sort of thing, you may want to reconsider and use fixed size images.
Background images in CSS are designed to display themselves in the background of the div they are placed in. This means that the size of the div determines the extent of the image you see. In your case, since your header region has no content, #header has the default dimensions set in layout.css.
As you have discovered, if your header div has no content, you have to explicitly set the size of your header to your desired dimensions, either in CSS as you originally posted (recommended) or with an empty block with the correct dimensions (not recommended except in rare circumstances).
If you use the preprocess functions, you should be able to set a class for the header and footer based on the images you choose. You will have to create the CSS for the different classes to match the images though.
For example:
Preprocess Function
function themename_preprocess_page($vars) {
$classes = array('image1', 'image2', 'image3');
$vars['header_class'] = array_rand($classes);
}
CSS
#header .image1 {
background-image: url(path/to/image.jpg);
height: [imageheight] px;
width: [imagewidth] px;
}
Hopefully this helps.
Related
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
}
</style>
</head>
<body>
<div>The property allows to Create Chess Boxes.</div>
how to repeat the above div rounded boxes until reach max width specified or according to table width or resolution & go down to next line and until reach max-height of the screen or as specified (time-table time) so that there is no need to scroll both width wise & height wise ? help needed
You can't - PHP as a server side component has no notion of browser dimensions. You need to handle something like this client-side using JavaScript.
To get your boxes to fill the width of the browser, use float: left in your css. To dynamically add boxes until they fill the page, copy the div using element.cloneNode(true), and continue until the bottom point of the div is below the bottom point of the container.
For example, something like this: jsfiddle.net/rUUuW/1/
It's a little easier with jQuery: jsfiddle.net/rUUuW/2/
Is it possible to set the default zoom level on a site? For instance, could I code my site in such as a way that it is zoomed to 125% when a user opens it?
My website body has this code
<body ID="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
How to put this zoom code inside?
Add zoom: 125%; to body style
body {
color: #536482;
background-color: white;
zoom: 125%;
}
This does not directly answer your question, but is an alternative that I recommend considering.
If you use relative sizing for your page (such as em), then you can set the base size of the site in one place, and the whole page will scale up and down accordingly.
For instance, if I want 125% of default size:
body { font-size: 1.25em }
Then, suppose I want a reasonable amount of margin around a header <div>:
#header { margin: 1em }
If I then go back and change that base size on the body to something else, the margin on my header will scale with it. If you do your entire page in relative units, this becomes very easy to do.
You might want to check the zoom CSS attribute. Bear in mind however that it is part of CSS3 and that, therefore, you might find it to behave oddly on old IEs. This is also completely separate from the interface zoom.
webView.setInitialScale((int) getResources().getDimension(R.dimen._50sdp));
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.loadDataWithBaseURL(null,htmlContent,"text/html","UTF-8", null);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDisplayZoomControls(true);
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
On the World of Warcraft forums they have a neat style set up that I'd like to emulate. I didn't know how to do it, so I decided to dig through their stylesheets and grab the pieces of it and put them together to learn how to make a style similar.
When digging through the stylesheets, I found this image. As you can see, it's the background for their forum posts, but it's a fixed size. Here's my question - how are they dynamically creating more length if a user's post is much longer than the picture is?
On a test website I grabbed the same CSS they used for that section. They have it set on overflow:hidden; so that it doesn't keep multiplying the image. Naturally, copying parts of their code gets me this mess on the test website.
It works correctly for smaller posts, since they just have to cut it off, but I'm assuming they have maybe a very thin (set width, perhaps 1 pixel in height) .jpg image that they are multiplying depending on the size of the forum post.
Does anybody know how I might go about doing this?
P.S. Naturally I'm not going to be using their images and such - I'm only copying it for now just to understand how to make my own.
Something like:
CSS:
.post
{
background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat;
}
(the image and the color are those really used, hope they don't sue me for that :) )
is what you're looking for. The background image is positioned on top and stays there, while the rest of the container's height has the same background color that the image fades to (using a gradient). So it's just an illusion of a stretched image, but effectively is just that you don't see the interruption where the image ends
It looks like their background color for the post is the same as the color at the very bottom of that image. That way it just "fades" in - the image does not actually change size.
Example CSS would be:
#yourPostSelector {
background-image: url('path/to/image.jpg');
background-position: top left; /* or 'top center' - whatever works for you */
background-attachment: scroll;
background-color: #000000; /* pick the bottom color of your background image */
}
Just change you background color which you have used is #00000*
It should be changed to the color of the background image which you use, basically the bottom part so that it blends perfectly. Presently as per your present image the code would be like this :-
.body {
background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
clear: both;
height: 100%;
margin: 0 auto;
overflow: hidden;
width: 990px;
}
Update this class and check the result, if you don't understand comment here would make you understand.
let's say that i have an image
It's size is
height : 150px width : 100px.
I want to get a part of it, let's say the full height, but with width between 30-80px. so it will be
height : 150px width : 100px.
I don't want to scale it. I want to cut a part from it. (thanks for editing, it's called cropping).
How to do it?
There is the (somewhat little-known) clip css property, although it does require that the element being clipped is position: absolute; (which is a shame):
img {
position: absolute;
clip: rect(0 100px 200px 0);
/* clip: shape(top right bottom left); NB 'rect' is the only available option */
}
Reference
jQuery cannot modify image elements like that. Your best option would be to position it within a parent element that has overflow:hidden to give the impression it is cut. Or you can use the clip CSS rule. If you actually wanted to make a new image you could use jQuery to gather coords on the image and patch those back to a server-side script to actually do the heavy-lifting and feed the new image down asynchronously.
Image editing is beyond the scope of JavaScript. You can display only a certain part of an image, but you can't actually change the image file:
<div id="imgwrapper"><img src="blah.jpg" width="100" height="150"></div>
#imgwrapper {
width: 100px;
height: 50px;
overflow: hidden;
position: relative;
}
#imgwrapper img {
position: absolute;
top: -30px;
left: 0;
}
Note that with this solution, the inner image is absolutely positioned but the outer div is relatively positioned, which may suit your page layout better than an absolutely-positioned and clipped image.
I think your best bet is to try and use a html canvas.
http://www.w3schools.com/html5/canvas_drawimage.asp
http://www.w3schools.com/html5/canvas_getimagedata.asp
Both allow for rendering parts of a source image, the getImageData() function also allows to read back the image data and manipulate it (for the whole image or parts of it).
It's my first time asking here (I have visited the site several times, but never asked). Well, let's go to the question:
It happens that I'm developing a live image resizer (I know it already exists, but I'm doing my own for my own projects). It has three parameters: the image path (obviously), the size I want to resize and the extra margin I want to add. The idea is to resize the image inside a box with square dimentions. The problem is, the size I want to resize depends on the size of the outer box. For example, I have this HTML code:
<div class="image_outer_box">
<img width="300px" height="199px" style=" margin: 65.5px 15px;" src="img.jpg">
</div>
The properties of "image_outer_box" are the following:
.image_outer_box
{
height: 330px;
width: 330px;
border:solid 1px #737373;
}
The function I call is this:
liveResize($img, $size, $extramargin);
The problem here is when I send the $size, since I must be aware of the CSS properties of "image_outer_box" in order to make the right resize. And, as you can see, it's not only a matter of the size specified in "image_outer_box" but the margin I want to add. Actually, I wanted to add 15px of extra margin for the image and resize the image inside 300x300.
It's not critical to have a way to get the CSS attributes from this particular class, but it would help if I (and other developers) can apply the function without being aware of the CSS attributes of the container where the image will be placed.
If there's a way to make it, I would be great.
Thanks! (for the other times I came here to search a solution and I found it!!!)
EDIT: I found a way that doesn't require to get the CSS properties, but still I would like to have info for this matter. Thanks for those who tried to help 'til now!
Do you want to actually store the resized image, or are you just trying to display it resized? If the latter is the case, the following solution might help:
HTML
<div class="image_outer_box" style="background:url('img.jpg') no-repeat; background-position:50% 50%; background-size:100%;">
</div>
CSS
.image_outer_box
{
margin:10px;
height: 330px;
width: 330px;
border:solid 1px #737373;
}
Of course, this doesn't allow you to manually set the width and height of the image, since that depends on our CSS entirely. Change the CSS, and the size of the image will automatically change as well. I like this method quite a bit, but it won't get very far if you want to store the image or if you want to be able to set the image size manually.
I think in order to be aware of the CSS and change according to the current client side state of the image you should (I mean I would recommend) use Javascript and maybe if you want to keep the function call it over AJAX.