So I have an image, more of a screen shot, but I am not sure what I should do to make the image scale. Should I export the text as some kind of SVG? I don't want to have to re-write the text, that doesn't seem to make sense to me in this context.
The image is:
What would you do to make it so the image will scale, the text is readable and life is grand.
I have never worked with an image that has text on it. I am sure the first step is to remove the text, but does that literally mean I recreate the text with a bunch of spans and divs to get the colors? Or is there an easier way?
Update
Some people might not be clear as to what context of scaling I mean. I am talking web responsive.
That is scaling the browser. Right now the image sort of scales, how ever the text is unreadable.
img {
display: block;
max-width: 100%;
width: auto;
height: auto;
}
DEMO: http://jsfiddle.net/7d064qao/
I hop this answers your question, wasn't sure what you meant
I'd set the image as a background-image of a div and use CSS to make the div itself responsive--width: __% or auto, etc. The background-image attributes are pretty flexible: http://www.w3schools.com/cssref/css3_pr_background-size.asp.
Related
OK, I would like make my "compass" move so it will not block the text when the screen gets smallar.
http://www.mateuszrybinski.com/
The point is not to make the compass go over the text.
["I’d love to travel but...
I don’t have money.
I don't have time.
I can't speak the language.
What is your excuse?"]
#main_box {
margin: auto;
background-color: #c95242;
overflow: auto;
padding-top: 50px;
padding-bottom: 70px;
background-image: url(http://www.mateuszrybinski.com/wp-content/uploads/2013/04/half.png);
background-repeat: no-repeat;
how can I do it? The best solution would be if the compass was going down as the text was closing in.
If you want to customize the position of the compass image, I would recommend not applying it as a background image. Instead, make it show up inline so that your text will never overlap it, similar to what you've done with your portrait image.
That being said, I'm not totally sure where you want your image to show up and that heavily influences how the layout would be coded.
I don't know about the layout code, but have you considered instead changing the color of the compass so that the text is still legible when over the compass image? For example, the compass could be a slightly different shade of the red background color.
The website I am making is here: diyhelp.es
If you re-size the browser you will see the white background behind the content actually get smaller (even though the div gets larger) I've looked in the CSS and cannot see a problem. Since I don't know what is causing it I cannot paste any code (unless you want me to paste the full CSS?).
It's only a plain white background - no image.
In your css.css find line:438, that looks like this:
section.content, aside.sidebar, .footer-col { float: none; width: 100%; }
remove the float:none; and it should solve your problem. Why? I'm not sure totally, but float:none; is known to mess up other floating divs. It is better not to use it. I can't even think of a reason why you might need it. In you markup, you don't need it there, because when floating div is set to width:100% there is no room for anything to float beside it anyway.
I'm having a big issue with something so "small" I can't figure it out and I'm reaching out to everyone here. The issue I'm having is this:
I have photos which are roughly 512px or 800px wide I want to fit, CENTERED, in a circle display area and keep my hover effects. I also need to size them the photos so the centered part shows a decent amount of the photo.
The current code I'm working with will make them perfect circles IF the photos are perfect squares. The problem is when the photo is a rectangle, it turns into an oval.
I had created a div like below using overflow:hidden and the css but it conflicted with the current CSS. Any help would be appreciated immensely!
.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;
}
img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;
}
Here's the link to my dev pages.
http://www.lmcodebox.com/b-test/index5.html
http://www.lmcodebox.com/b-test/portfolio.html
have you thought about setting the image as the background of the div? This way you keep all the effects you already use and there are ways to manipulate the background position without affecting the outside div. Other possible solution to have perfect round divs, is to use the ::after pseudo-class, like in this gallery tutorial:
http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
Sorry if I misunderstood you, hope it helps.
PS.: Beautiful test page by the way.
Well first, you'd only need to set the border radius to 50% to make something a circle, and if each corner is the same value, then you can just enter it once like so:
border-radius:50%;
As far as these images being rectangles goes, you could set your images as the background of a span, give it a height and a width that forms as square and use display block. This would keep the photos proportional, but allow you to make them square.
This however, could create a bit of a markup mess if you have a lot of images to display. Another solution, which means more work, but I would personaly do it, is to just crop your images into squares for their thumbnail with photoshop or some other image editing tool.
Above all of that, I don't see a width or height actually declared on the pages you linked. Are you sure you've placed them on the correct class? I see the border radius declared, but I'm only seeing a max-width: 100%; not width: 200px or height:200px
I re-thought the problem with the suggestion of using the images as backgrounds of an element as madaaah did above.
What I ended up doing was wrapping a DIV around my A tag like this:
then, I set the background of the A like this: style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">
lastly, I made a square image (800 x 800) to go inside the A tag so it would keep the round shape and made it completely transparent so the background image is visible, while growing and shrinking in a "responsive" manner.
This is some html and css, you can see what it does:_ (The first box is really the one that matters)
http://jsfiddle.net/rcGsH/2/
The problem is to make this work properly with the image there, I have to use some tricks to get it to work properly that don't seem very good... like
floating the img left or right so it's not really taking up space.. (is there another way around this? or is it fine how i'm doing it?)
.ad img {
height: 175px; width: 175px;
float: left;
}
And making another wrapper div around the text inside the ad_info div and setting it to bottom: 175px so that the text stays in the transparent part... is there another way to this as well?
If anyone has proper fixes to these problems or these are fine please tell...
OR I have another idea where i could put the image as a background image with JQuery, (since the image will come from php), i have a good idea of how that would work but could anyone tell me which solution is better?
Thanks!
There is a lot of ways to do this, you are doing right (maybe some extra divs), but I thinks this is what you are looking for:
Boxes, images and captions
Like an extra, they use a little bit jquery, to animate the boxes ;)
If I have a background image that is, let's say, 20px in width, and I want it to rather be 40px in width (but adjusting in photoshop would not work as I want it).
How can I change the width?
body {
background-color:#5b7c8a;
background-image:url('images/diagnol.png');
background-repeat:repeat-y;
margin:0;
}
It's diagonal lines as you can see from the image,
screenshot http://img62.imageshack.us/img62/4263/testzjr.png
and the spacing is just as I want them. Editing the image may mess up the spacing. So I'm trying to get the background coverage area of the body to be a little bit more? Right now the image is 6px width. I want it to appear as 20px width, as if the image were in repeat-x-y in a 20px div? (so not stretching the image, just gaining more ground with the image)?
I hope this makes sense > <
"adjusting in photoshop would not work as I want it"
CSS is not image editing software. In photoshop you just need to go to Image > Image Size and scale as you wish. Or take your time and learn to use the basics of Photoshop to get the effect you want. You just need to not be scared and experiment with each tool till you get what you want, as you can obviously undo the undesired effects.
The CSS way is possible but it's not meant for these kind of situations and will not be cross browser friendly. It's rarely used on typical sites so fortunately I'm not going to encourage it. Good luck.
I believe there's been misunderstandings with what the OP wants.
Incase i got it right, check out this example:
http://jsfiddle.net/vYxza/
Think of the #text as body and the .this_div as the element you need to create inside it.
Basically you create new element where you repeat the background in all directions but you just restrict the width of that element.
Another way of doing it:
http://jsfiddle.net/vYxza/1/ - This is actually the way i would do it mostlikely.
Note that again.. if you wanted to use it in body... think of .this_div as html and #text as body