I'm try to wrap text around a image and I'm using an img class on my style sheet to do it. It's loading the style sheet correctly and all the other style attributes are working correctly but the image. It works fine without codeigniter but for some reason if I add the class tag to the image in codeigniter the image does not show up.
code is below:
//CSS//
.imgWrap {
margin: 8;
float: left;
}
//html//
<img src="<?php echo base_url{'../images/image_1.jpg'); ?>"
alt ="landmark" class="imgWrap" />
Firstly, base_url(), not base_url{).
Secondly, margins (and most other things in CSS) need units. Pixels (px), points (pt), picas (pc), even inches (in) if you desire. Have a look at http://www.w3schools.com/cssref/css_units.asp
Thirdly, for a good image wrap, you will want it positioned absolutely (perhaps relatively, depending on what you're doing), give it a display: block; and possibly explicitly define the width and height.
Related
I'm looking for a way to place text under my images and want to keep it there when changing browser size (if possible make text bigger and smaller when doing so, but not necessary). When I use a div around an image the other images seem to disappear.
This is the link to the site:
http://www.noortjepalmers.be/portraits.html
Thanx.
You can add a div around each image, give it a class like "image-container" and then in your css you set
.image-container {
display: inline-block;
}
when I am using LinkManager on an inserted image, a blue border starts coming around the images. Can some body help me to remove this border?
This is a default behavior of IE inside the editable iframe elements, which can be customized via the following CSS rule:
a img
{
border: none;
}
Put the class in a CSS file and load it through the CssFiles property of RadEditor. It will clear all borders shown for images inside an tag.
Best regards,
Rumen Jekov
I am trying to figure out how to rotate an image in a div depending on the screen size.
Basically there is this set up:
<div> <div with arrow pointing right > <div>
in a fluid row (bootstrap) and I need the arrow image to rotate 90 degrees to a down position because when in a mobile the divs will stack.
I thought about using a blank <div> and a background-image and media queries to change the image, but having to have a blank <div> with set pixel dimensions isn't great (or is it?).
Another thought was to have an <img> of the arrow inside the <div> and perhaps use jQuery to rotate it depending on screen size, but seems OTT, and possibly beyond me to figure out how to do it.
Any suggestions or hints would be more than welcomed. Maybe I am missing something really simple.
The solution from #Stuart works well -- here's another possiblity that uses CSS. This isn't necessarily a better answer, just different.
http://jsfiddle.net/panchroma/u4zWp/
HTML
<img src="../image1.jpg" class="rotateMobile">
CSS
#media (max-width: 480px) {
.rotateMobile{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
}
Good luck!
If you create two separate identical elements with two different images, you could set one to diplay at one size and hide the other, and vice-versa.
For example:
Html
<img class="arrow" src="arrow.png" />
<img class="arrow90" src="arrow90.png" />
Css
.arrow{display:block;}
.arrow90{display:none;}
#media handheld, only screen and (max-width: 491px) {
.arrow{display:none;}
.arrow90{display:block;}
}
I did give a search before I started to ask this question as it is a very simple question. I have an image and I would like to have it as the only element on our webpage. There is no other content as this image conveys what we want to convey. Now we would also like to resize itself depending upon the device it is being displayed. I hope this is achievable through HTML though I would like to know if there is any other options.
Thank you,
Karsnen
What you're looking for is the background-size property. By applying background-size:cover to your <body>, the image will resize itself accordingly regardless of viewport dimensions.
Note: Your image may clip with the use of cover.
An alternative value for background-size can also be contain. If you apply background-size:contain instead, it'll still resize the image accordingly just as the former would.
Note: While this approach promises to never clip the image, it'll also show negative/dead space as well (which sometimes isn't ideal).
Your CSS should reflect the following:
body {
background-image: url('bg.jpg');
background-position: center center;
background-size: cover; /* or background-size: contain */
}
You can use an image as a web resource (“page”). You could simply link to it using something like href="test.jpg", or you could announce its URL directly. Browsers will display it somehow, possibly scaling it to fit browser window width.
The next simpler, and better, approach is to use a page with just an img element as its content. It can be made to scale to browser window width by setting its width to 100% (in HTML or in CSS). This way, it will keep its width:height proportion when scaled. The quality of scaling in browsers varies but is generally good, unless you scale upwards a lot. In this approach, the inherent width of the image should be sufficiently large (say 2,000 pixels) to avoid considerable upwards scaling.
To remove default spacing around the image (default page margins), it’s simplest to use CSS.
Example (with “...” to be replaced by useful information):
<!doctype html>
<meta charset=utf-8>
<title>...</title>
<style>
html, body { margin: 0; padding: 0; }
</style>
<img src="demo.jpg" alt="..." width="100%">
Set it as a background-image and use the appropriate background-size (e.g. contain):
html {
height: 100%;
}
body {
background: url('to/your/image.png') no-repeat;
background-size: contain;
}
Here's a demo.
I use this:
css
#body{
background:url(../img/bg.jpg);
margin: 0;
}
javascript
$("#body").css('width',window.innerWidth)
$("#body").css('height',window.innerHeight)
I am making a website in Joomla.
And on my front page I have some images, which are links.
I want these images a's to get a slightly green effect, like opacity + green and stil have the original images below.
Is this possible to do with only css?
I can get the opacity to work, but not the green color.
Hope some one can help me.
Here is my site. it is the the small images under "Referencer" and "Nyheder"
This is doable with CSS. The main trick is that the links currently aren't surrounding the img block because their display type is inline.
Assuming the following HTML:
<img src="..." />
This is the CSS you need:
a.greenish {
background: green;
display: inline-block;
}
a.greenish img {
opacity: 0.5;
}
Adjust green and opacity to taste, obviously.
See this lovely jsfiddle for an example. Note that this includes addition CSS in case you only want it to turn green when hovered.
You won't be able to do what you want with pure CSS easily. There is no "overlay" in CSS. You can manipulate the background color/opacity, but the image would always be on top of that so it would not achieve the effect you want.
What you will need to do is to make the image the background of the A, then change the background do a similar image with the effect already applied. The images are small so you could easily make them sprites with the over look all in the same image. I did exactly this on the social icons at the top of my company website - http://www.bnrbranding.com/