im really new to this but heres my problem. I need to upload a pic onto my website (im using aptana studios 3). So i save my image as jpeg and use the code:
now it acknowledges that I am uploading the picture but it won't load. Do i have to convert the image or save it a certain way?
Oh buddy, make sure to post the code you're having issues with. In any case, it doesn't really matter what file extension you use (though .png may be the best for web). I'm assuming this is hard-coded HTML, if that is the case, I would use a simple <img /> element to display a picture. Make sure the image is saved in a nearby directory.
<div>
<div class="item"><img src="./example.png"/></div>
</div>
In the example above, example.png is located in the same folder as my index.html file. We use the attribute src, not href. An href attribute dictates what page is to be loaded when an element, e.g. an <a> element, is clicked on. If you have a CSS stylesheet, it might be preferable to load the image as a background-image to a <div> element, so that it would be easier to manipulate image properties like height and width. An example of that would be:
<div>
<div class="item"/></div>
</div>
..and the CSS:
.item {
background-image: url("boxes.png");
width: 800px;
height: 600px;
background-size: contain;
}
Here, I set the image's height and width, and tell my styles that I want the whole image to be show with background-size: contain;.
I hope this helps.
Related
I have background images in my CSS file that are quite heavy. For that reason, I would like to load them using Lazysizes, which loads content as you scroll on my site.
My github hosted page
To enable load on scroll the image needs to be inside the HTML using the class lazyload and data-src. This works very well for me on all the assets on the site but I have some background images in my CSS that I have tried to move over to the HTML, but I fail to style it and look and work the way the backgrounds currently does.
I did not write the entire CSS on the site and I'm stuck making the current background images act exactly like they do now, but give me the possibility to just have the image references in the HTML.
My attempts have resulted in the image being stretched or won't use the breaking points as all current backgrounds work with or the background resulting in a square in the middle of the page.
So the challange for me is not the actual HTML, or getting it to load using lazysizes. The challange is getting the CSS to work.. HTML element with the backgrounds I'm trying to change is attached below:
<section class="proj">
<hgroup>
<h2>Socialmist</h2>
<h6>Instagram with music from SoundCloud</h6>
</hgroup>
<div class="mw by full">
<img class="wide">
</div>
</section>
Thank you for taking your time, much appreciated!
Made it work. Attached code below.
.yay {
max-height : 550px;
background-repeat : no-repeat;
background-position : center;
object-fit : cover;
}
<section class="proj">
<hgroup>
<h2>Placeholder</h2>
<h6>Placeholder</h6>
</hgroup>
<div>
<img class="wide lazyload yay" data-src="img/sm/bg/7T5C5861-s.jpg"/>
</div>
</section>
I have built my app using react-bootstrap
I have an image tab inside my component. It looks like this:
render() {
return (
<div id="homePage">
<div class="hero">
<Image src="/images/welcome-page-pic.jpg" responsive />
</div>
</div>
);
Yes, the tag for image in this framework is "Image" not "img".
This will display the image but its not very responsive, so I did some playing around in dev tools and found a styling that worked if I used the image as a background image in css using the following styling:
.hero {
background-image: url(/images/welcome-page-pic.jpg);
height: 400px;
background-size: cover;
background-position: center right;
}
This, of course, requires removing the tag and src altogether, but doing that just removes the image. If I try adding the styles to the HTML (or rather JSX) instead of the css, then the page just doesnt load at all. I also tried leaving the image and src and just adding the css minus the background-image styling - also a no go. Not sure if this is an issue with the framework or something stupid im doing. Thanks.
UPDATE: after playing around a bit more, I found that for whatever reason, my local host is not accepting the class "hero" into the nested div. If I add it in devtools manually, the image appears and responds how i want it to. Now the question is why the class isn't assigned to the div upon page load of the jsx.
I think it should be className in react, from memory.
I'm trying to display a local background-image in CSS. It's in the same folder as index.html and it's not displaying.
.image {
width:100px;
background-image: url('PIC1.jpg');
}
Any help is appreciated.
It is not appearing because you didn't give any height to the div see this http://jsfiddle.net/ce1j6k7k/2/ you can remove the height to see the difference
HTML
<div id="image"></div>
CSS
#image{
width:300px;
height:300px;
background-image:url('http://placekitten.com/300/301');
}
Resources specified in CSS are resolved relative to the path of the CSS file, not the page referencing the CSS file. PIC1.jpg must be located in the same directory/folder as the CSS file itself.
There is no way in CSS to do what you think it does - and that's a good thing, because I can't think of any possible use-case. Imagine having these pages all referencing style.css:
/index.html
/products/fish.html
/user/account/orderHistory
...if style.css referenced "foo.jpg" then foo.jpg would have to be replicated at /foo.jpg, /products/foo.jpg and /user/account/foo.jpg.
I can think of 3 possible problems.
First, the image path. for example if this is your image's real path:
D:\Projects\MyProject\Content\Images\PIC1.jpg
you should do this in your code:
background-image: url('~\Content\Images\PIC1.jpg');
Second, is that the width that you've set in the code doesn't match the image's coordinates. In that case, you can either change the code or re-size the image.
And finally, the image might not be loaded on the page and by refreshing it few times it might be shown.
Not sure what I'm doing wrong here, but I've tried following the example on the relevant w3schools page, but to no avail. So here's what I have so far:
I have four images on my index page, called index1.png, index2.png etc. I combined them into a single png, which is simply index.png. That's my sprite image. I also have a 1x1 transparent image, which is the placeholder for each image in the HTML. Here is the image code:
<img class="index1" src="Images/trans.png" alt="alt" title="title" width="40%" />
And the CSS:
img.index1 {
width:258px;
height:300px;
background:url(Images/index.png) 0px 0px;
}
Testing the page out, I get nothing more than a resized transparent image. The image I want displayed does not show up.
EDIT: Solved. I was an idiot and forgot to go up one directory in my CSS, since my CSS was in a folder on the root. The proper path was "../Images"
Are you sure the path to your images folder is correct? Make sure your path for your sprite is relative to your CSS file, not from where the CSS file is being linked from.
If you had a folder structure like this:
/index.html
/css/style.css
/images/sprite.png
/folder1/index.html
/folder2/subfolder2/index.html
The correct path to use in your CSS file would be this: ../images/sprite.png.
The path would be the same in your CSS file regardless of which index.html file that you would be including it from in the example above.
First and foremost, seeing as though you're using a sprite <img> isn't the correct tag. A div will suffice here. You also don't need to target HTML in your CSS as you've set a class. Try...
<div class="index1"></div>
Also your image url is missing quotation marks.
.index1 {
background-image:url('Images/index.png');
background-position: 0 0;
height:300px;
width:258px;
}
Try using an element other than <img>. A <div> element should work fine.
<div class="index1" alt="alt" title="title" ></div>
And the CSS:
.index1 {
width:258px;
height:300px;
background:url(Images/index.png) 0px 0px;
}
I am trying to set my background image of the page via CSS using the following code, but no image shows up. The image will be tiled on the page and is only 10x10px big. Nonetheless, it still doesn't show up. Please can you tell me what I am doing wrong?
<body>
<div id="background"></div>
</body>
#background {
background-image: url("img/background.png");
}
Is the image in linkToCssFolder/img/background.png? The image path is relative to your CSS file.
Also, does your #background div have content in it? If not, it will probably have the default 0px height, and not show any background.
You need to give the element dimensions too...
#background {
width: 10px;
height: 10px;
}
Background images do not make their container stretch to fit.
Here is a list of all CSS keywords
Just tried this at http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple and it works.
I assume your image is not at right location or if the background property is being over written by style or another css rule.
such a no brainer thingy of css and html often forgotten even professional due lack of proper focus and just being tired.If you knew it just rest for a while.
here are some tips if you lost in the tree of web design.
Check the files if it is there, the file type and support for the file in your browsers
Check the directory if you are online you can put all the URL of the file OR use "../" if your css and the image file is in different level of directory.
Check your syntax.
rest, take a nap or have a coffee break.
Firstly check your CSS and image location
1) Both in same folder then try " background-image: url("background.jpg") " simply.
2) If you have img folder and image inside this folder then try " background-image: url("img/background.jpg"); "
3)If you have img folder and If you have CSS folder then you have to go one step back then goes to image folder and choose image it seem like this " background-image: url("../img/background.jpg"); " where '..'represent one step back
#background {background-image: url("img/background.png"); height:300px;}
add height element in css
Another source of error may come from image extension name, for instance in :
background-image: url("img/background.png")
Image name must be "background" and NOT "background.png"
Image "background" must be a PNG and not another image type like JPG
Hy,
to get your image you must imagine that you are in a terminal(or cmd prompt) and write as youuld do to get to the image.
So let us say that your css file is /css/ and you image is in /img/background.png.
To get to the image you must write this code background-image: url("../img/background.png");
This is because in terminal/cmd prompt to get to the image from your .css file you would first type cd .., then cd img, then background.png. Hope it will help you!
Cheers!