my goal is to add text inside the box below which is an image and depending on how much text I enter, I would like to have the middle part of the image extend to accommodate for the increase of text inside. I do understand that one method is to "chop" the top part, a small section of the middle part, and the bottom part, and have the middle part repeat numerous times. I was wondering if someone could suggest how one goes about doing this, or, if there is a better option to take instead. Thank you in advance.
I've hosted the pictures through Flickr
You could make the image the background of the div then set "background-size: cover". The image would then grow to fill the div as the div grows.
Related
How should i go about forcing text to always stick inside of a particular form despite display size?
In this thingy half-transparent white triangle is a separate shape from background image and as it's obvious intent is to always have text stick inside.
Herein lies the question: what's a correct way to go about it? Are there any common practices for this?
How i'm intending to make it work right now: current idea is to make background and triangle overlay into one background picture and have a number of #media css rules for font sizes and paddings based on screen size, but i'm pretty sure that's not a correct way to go around it.
Thanks!
When I have a webpage in HTML change window sizes, the text will remain at 50% and not just stay the same formatting, or will wrap around an image because it's not positioned correctly. How do I keep it in it's own little invisible box to stay that format even when the window size changes?
text that I want centered but not to change position when the window size changes
I hope I didn't misunderstand your question but if you want to keep that text in one place maybe try with "position:" property (for example: "position: absolute" etc.").
I am having a difficult problem which I can't solve properly. I am trying to design a web page. I came up with a problem and I can't find the solution. I have two pics in my web page. I want them to be in the center of the page. It is quite diffcult to set the image float left and then right and then bottom. That is too difficult for me. and then my second problem is I want a text below my image.
But I can't do that because it is difficult to set the text position like "left:20x: "right:20px; and blah blah.
Set the positions of the images to relative style="position:relative;" then use right and left to move them from side to side (top and bottom to move them up and down). You can also put your text in a < div > and move it separately.
If after this you are still unsure, please enter your code and I'll examine it to make any modifications required.
EDIT: Here's an example of the CSS code I'm suggestions you use, in case you didn't understand what I meant:
style="position:relative;left:10px;top:35px;" Put this in the img tag and it would alter the position of your image by 10 pixels to the right and 35 pixels downwards.
I want to display a text behind an image. I've tried with vertical-align:top applied to the image. The first text line is placed behind the top of the image, but the second one appears on the bottom of the image.
Like here: JSFIDDLE
How to place the text that fits behind the image, and the rest below, filling the whole width?
Is this what you mean?
http://jsfiddle.net/K39Cm/1/
float:left;
If you visit http://www.timkainu.com/journal/ you can see that there are some "featured images" floating to the left of the text. How can the text wrap around the image? I've used Firebug to try and find out what part of the CSS affects it, but I failed, obviously.
The site runs on WordPress and the theme being used is called "Striking", which is found on ThemeForest.
Thanks!
You are going to have to make some change to the theme to make that work. In order for text to wrap around an image, the text and image need to be in the same container. In this case, the image is in one DIV and the text is in the DIV next to it. You'd need to move div.image_styled.entry_image inside of div.entry_info to make it work. You would probably need to make some CSS adjustments as well since it was not design to wrap around the images like that.
Are you referring to, for example, the first item "Costco Photo Center Review" with the image of Costco on the left?
The image is wrapped inside <div class="image_styled entry_image"></div>
and the text is wrapped inside <div class="entry_info"></div>, both of which are wrapped inside <article id="xxx" class="entry entry_left">
In order for text to wrap around the image, they need to be in the same container, with the image set to float: left. I'm not sure how this relates to Wordpress, but in terms of HTML and CSS, that's the way to go.