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.
Related
I'm aiming at doing a chess game or actually a chessengine just for the fun of it :-) The easy way to have several chesspieces would be to have one image for each chesspiece but that would be a lot of http-requests which seems unnecessary.
I want to use image from https://commons.wikimedia.org/wiki/File:Chess_Pieces_Sprite.svg
and retrieve the image with background-position and that would not be a problem...
BUT the issue is that the chessboard and it's square are not always the same size (it must be responsive) and I want each sprite to act as a normal image and resize accordingly to the squares.
I've tried with background-size and background-size and wrappers in combinations but obviously I'm missing out something. Maybe it's the wrong approach in this situation? What do you think?
I've also thought about "slicing" the sprite image and create the images from php but I think using css would be a nicer solution.
If I have like this html (which is generated from html) - I would like to view a scaled version of the chesspieces.png (which is 2000x667 in dimension) so it fits in this div and scales accordingly but only shows a portion of the chesspieces.png file, e.g. a rook. I hope you understand what I mean!?
<div style="float:left;background:#ffffff;
width:100px;height:100px;"
class="square"><img src="chesspieces.png">
</div>
Please do tell if you need more information!
UPDATE
Thanks for your input!
I've tried with this:
<div style="width:100px;height:100px;background: #ffffff
url('chesspieces2000.png') -20% 40% no-repeat;background-size: cover;
class="square"></div>
What ever I put in in y pos % it does not work. I want the image to fill out the whole square so therefore I'm using background-size:cover
I've also tried background-position-y:40% but nothing happens. I'm able to change ypos with fixed pixel values. Is this supposed to work in this way?
Clarification:
I have this output:
and with this html:
<div class="square"
style="float:left;width:100px;height:100px;background:#000000"><div
style="width:100px;height:100px;background:#000000
url('chesspieces2000.png') 0 0 no-repeat;background-size:100%;"
class="square"></div></div>
And I want to fetch one chesspiece scale it so it covers the square to 100% width and height auto.
UPDATE2:
Thanks to #Robo Robok Thanks!- I solved it, but some mixing with values made it work as I wanted to!
<div style="width:100%;height:100%;
background:#ffffff url('chesspieces2000.png') 19% -10% no-repeat;
background-size:auto 170%;"></div>
Here's the queen! :-)
and when resizing image wrapper:
This works fine as well. It covers all the square!
<div style="width:100%;height:100%;
background:#ffffff url('chesspieces2000.png') 20% 0% no-repeat;
background-size:auto 200%;"></div>
Try this:
<div style="width: 100px;
height: 100px;
background: url('chess.svg') no-repeat 40% 100%;
background-size: auto 200%;"></div>
background-size needs to be auto 200%, because you have 2 rows in your sprite, which means the entire background needs to take twice the height of your element.
Background positions for each sprite are:
First row: 0 0, 20% 0, 40% 0, ... 100% 0
Second row: 0 100%, 20% 100%, 40% 100%, ... 100% 100%
I am making a project in which I am using a cover picture like Google+.
approx Full on screen but when I upload small size pictures or very large size pictures, it stretches or compress in preview.
simple tag I am using to fit in my box is
<img src="coverphotos/1291384_4846629064030_1548133592_o.jpg" height="530px" width="1024px" style="border-width: 0px; margin-top:-4px">
Very very important. I wanted to make a cover picture on my project but i am getting irritated because its stretching, and making picture ugly, how Facebook,Google+ upload a cover picture without stretching?
Preview.
http://www.tiikoni.com/tis/view/?id=479959b
I don't want it to get stretch, while uploading on fb and google its works osm
Either set the height to 530px OR set the width to 100%, don't do both together.
The picture will not be stretched and will maintain its aspect ratio. :)
This: height="530px" width="100%"
You're telling the picture to take the full width of its parent and to be exactly 530px high. What you probably want is unconstrained height on the image, but constrained height on its parent with overflow: hidden.
Take a look at this article: Perfect Full Page Background Image
Based on your link, this css fixed the issue.
body {
width:100%;
margin: 0;
}
center {
width:100%;
}
center img {
width:100%;
height: auto;
}
The issue is a bit problematic to create a fiddle but I found a template that has a similar problem: http://www.elegantthemes.com/demo/?theme=StudioBlue
The issue is the following: there's a wrapper that has all the content inside of it and a background image positioned at the top center with no-repeat. Everything looks fine, until you resize the window until the window size is smaller than the content/wrapper size.
At this point everything still looks fine as the left edge of the content is aligned with the left side of the browser and you get a scroll bar at the bottom. However, if you scroll to the right you'll see that the background image (since it's centered), actually moved to the left and is now partially of the screen, leaving some blank space to the right. Any idea how I can trick the background image to stay on the screen instead of going off the left side when the window size becomes too small?
you could probably either set the center value to 50% and see what that does (probably nothing different) or you could use media queries for smaller screen sizes. The example you've shown does not have a center position, just a top. Let me know if I understood correctly or what occours! :)
background: gray url(img.jpg) 50% top;
or
#media screen and (max-width:480px) {
body {
background: gray url(img.jpg) left top;
}
}
The issue is that the image is being centered relative to the width of the window when it needs to be centered relative to the scroll width. To fix that, you can create another div at the top of your html to have the background image:
#image-div {
position: absolute;
min-height: 100%;
width: 100%;
background: #000 url('image.jpg') no-repeat center top;
}
Related: https://stackoverflow.com/a/15792723/1721527
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.
OK, let's say I have this image:
In my Java game, I use a cropping method which crops each monster of 32x32 pixels and thus puts in monster[0] onwards. Anyways, in PHP, is there some way I can do this? Like crop an image and go from there?
Any help would be appreciated.
You can use imagecreatefromgif() with PHP where you can create a new image on the fly by giving specific x and y positions. Rather than just me copy/pasting the code, here is the link to the documentation.
http://php.net/manual/en/function.imagecreatefromgif.php
You can also use different variations of imagecreatefromgif() such as imagecreatefromjpeg() or imagecreatefrompng() etc
All are linked to on the PHP documentation page as well as more examples in the comments.
Hi you can crop the image via imagecopyresampled the man page
http://php.net/manual/de/function.imagecopyresampled.php
You just have to set the correct offset.
if this should be displayed in a Browser you can do it even via CSS
.selector {
height: 32px;
width: 32px;
overflow: hidden;
display: inline-block;
background: url(theimage.gif) -32px 0px no-repeat;
}
Hope it helps
Don't crop it. You can use it as it is with CSS background-position. The the sive of a and move the background to the image you want. It is faster than loading every image on its own.