i'm new to css and html.
i had something like this and i don't get the background-image show up
...
<style type="text/css">
#header_contain{
width:935px;
height: 135px;
background-image: url('bg.gif') repeat-x;
background-color:#E42323;
}
</style>
</head>
<body>
<div id="header_contain">
<h4>haga</h4>
</div>
</body>
...
I checked the image location and it's alright. I put an image from google and it shows. Now it only shows the bg colour. How can i get the bg image show up?
Change your css to this:
#header_contain{
width:935px;
height: 135px;
background-image: url('bg.gif');
background-repeat: repeat-x;
background-color:#E42323;
}
In your browser right click on the element and choose inspect element .
In the open window find your element properties and find its background url.
If the url is not correct you will see a tooltip Failed to load the url.
firefox firebug
in the firefox browser, open the firebug plugin and change to console tab, reload the page.
You will see the http requests there. If the browser fail to open the Url, you will see an error at console.
background-image property value should contain image URL only while you have repeat-x too.
You should write
background-image: url('bg.gif');
background-repeat: repeat-x;
background-color:#E42323;
background-position: left top;
You need to undstand all this things like
"background image" is the tag in which you can add image.
"background-repeat" this is help you to repeat the image in x and y axis
"background-color" is help you in fill the color
"background-position" will help you in change the position of image in px , em etc.
so over code can be in this way as wel "background: url('bg.gif') #fff left top repeat-x ;"
Related
I am using this code to show image
<img class="imgpath" />
<style>
.imgpath{
width: 32px;
height: 32px;
background-image: url(/images/logout.png);
background-repeat: no-repeat;
}
</style>
but I am getting this
What is causing this and how can I fix it?
This is my image
When using the img html tag, you are supposed to specify the src. Since you didn't, it displays a default small image showing that the browser couldn't get an image from src.
You have at least two possibilities depending on what you intend to do:
Use src and remove background css rules: <img class="imgpath" src="/images/logout.png"/>
Use another html tag, example: <div class="imgpath"></div>
Background
I am allowing user to upload an image inside mask image....
Once user upload image, I am filling user uploaded image inside mask image :
1.Mask image :
2.user uploaded image :
3.User uploaded image on mask [Final image ] :
Codepen : https://codepen.io/kidsdial2/pen/OdyemQ
JSfiddle : http://jsfiddle.net/2xq8p0zy/
Html
<body>
<img src="http://139.59.24.243/images/invitations/birthday/a.jpg" alt="">
</body>
css
body {
background-color: #111;
color: #555;
font-size: 1.1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
margin: 20px auto;
display: block;
width: 100%;
height: 500px;
-webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-image/mask-image.png);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Requirement:
I want to give an option to move the user uploaded image inside mask image as in this fiddle :
http://jsfiddle.net/aLcb4sb5/ or link
Issue :
but currenly in website both images are moving....
I made a few changes to your design. its a small change to the html and css.
The new html layout is like this
<div class="image-holder">
<img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg" alt="">
</div>
where image-holder div is the mask image and the image inside it, is the user uploaded image
I made a demo have a look here
Note for draggable to work you need jQuery.ui installed, and I think that you already using it in your site.
Please remove below CSS code from .photo_holder img and write on .photo_holde. Like this:
.photo_holde {
-webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
I used the uploaded image as background image of a div, then moved the background position according to the move drag. The initial position is set to "0px 0px".
Written in pure JS, You probably can make it shorter if you choose to use a JS library that handles the drag.
<div id="draggable" draggable="true" style="background-position: 0px 0px;"></div>
Example here
You need the image to be draggable so
first we need a container for it to be wrapper to listen to the dragover event
and listen to the dragstart event on the image itself
hence we able to calculate the drag distance and apply it as css translation
Please check the following pen i've forked it from yours and apply the changes also
I've added listen to onwheel event and apply zoom in and zoom out for the image and on same way
I recommend you to apply flip horizontal and flip vertical and image rotation
enter code here
https://codepen.io/anon/pen/yZVPrp
check this link out, might help you. What you want is called a "Clipping Mask".
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths
EDIT: Here's some magic. You're welcome!
Codepen: https://codepen.io/anon/pen/zeZMLz
I know there are similar questions but they don't exactly answer my problem. Am trying something really simple, turning a background image into a link, am following a tutorial and he did it easily so i tried it but it just didn't work, the image just doesn't show, i did all my checks from the tutorial but it just doesn't work for me.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="s017.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body>
<h1>CSS</h1>
</body>
</html>
body{
font-family: open-sans, sans-serif;
}
#fb/*, #tw, #sc, #in, #ig, #wa*/{
height: 60px;
width: 60px;
display: block;
position: absolute;
}
#fb {
background-image: url('image03.png');
background-position: 0px 0px;
}
as for the result:
as you can see there is nothing in there other than the title
i taught it was the browser but i tried it with Mozilla and Chrome with same result.
If you are trying to use this as thumbnails, I recommend just using images instead of trying to set background images. When you are setting the background image, it isn't resizing the image, but showing a small 60x60px section of the image in the background. If the top left corner is white, that's what you are seeing. Instead of background image, try this:
<a href="https://www.facebook.com">
<img id="fb" src="http://blog.addthiscdn.com/wp-content/uploads/2015/11/logo-facebook.png">
</a>
Here's a working codepen showing what I believe you are looking for. If this isn't exactly it, or there's a reason specifically you must use background image, let me know and i'll update my answer to reflect.
At first please be sure that your link for CSS file is working , As you know you should put your Style codes in s017.css file that is in your html file folder.
Probably your image size is big and didnt fit in your 60*60 (a) tag block or your image have a white space in left top position that you intered.For the first you can use background-size in css for " #fb " :
background-size:contain;
and for the 2nd probability you should crop your image with paint or other image editors.Of course,you can set the position in center of image but this is not recommended.
I hope this work for you!
Have fun !!
I've tried to put a background image of a tileable galaxy on my website, but all its showing up is just red. I've tried removing the background color but then it just shows white. I've looked around but I'm just not sure what I'm doing wrong. Here's my code:
<style>
body {background-color:#800000;background-
image:url("https://srv4.imgonline.com.ua/result_img/imgonline-com-ua-
TextureSeamless-6dnmvt65oVOZjthV.png");
background-repeat:repeat;background-position:center center;
background-attachment:scroll;}
</style>
Any advice?
An image you are looking is not available on this below URL
https://srv4.imgonline.com.ua/result_img/imgonline-com-ua-
TextureSeamless-6dnmvt65oVOZjthV.png
For example you can try something like this:
html{
background: url('https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat 0 0 scroll;
background-color:#0C0C0C;
background-size: 100% 100%;
height:100%;
width:100%;
}
Your image link is broken.
Try using another link, for your syntax is correct in the CSS.
Here is an example image link: https://thumb1.shutterstock.com/thumb_large/1479467/543360034/stock-photo-close-up-of-milky-way-galaxy-with-stars-and-space-dust-in-the-universe-long-exposure-photograph-543360034.jpg
So for example the picture below I'm having typing giving each class="container" it's separate background colour/picture.
<div id="p" class="container">
</div>
style sheet
p.container {
background-image: url(img/this_is_top.png) repeat;
}
CHANGING QUESTION for some reason I have having trouble in setting a background Image* for it.
Regarding your background image problem you currently have
background-image: url(img/this_is_top.png) repeat;
This is wrong. But you are thinking of the background shorthand CSS property which follows this syntax:
#p.container {background:#ffffff url('img/this_is_top.png') no-repeat center center;}
And if you are styling in your stylesheet and your folder hierarchy is the usual (/~/>/img etc) then it should be:
#p.container {
background-image: #ffffff url('../img/this_is_top.png') repeat center center;
}
Notice the double dots before the url to tell CSS to look up a level for the img folder
For starters, having multiple id's with the same name on the same page is not such a great idea. http://css-tricks.com/the-difference-between-id-and-class/