I have being wondering thinking what do one achieve this type of background in css for quite a while now. It's an image background, yet the image does not seem to be there. You cant download the image and cant drag it along. Please see the Pink stylish image background here . How can I achieve that? Or can some one help me with the feature name? Or perhaps a good link where I can learn or see the example on that? I just try googling but don't know what it's call. Another example is the chinese new year background Here.
Its a background-image:
New year:
.homepage-background-cny {
background: url("../../img/cny.jpg") no-repeat scroll right top transparent;
}
Etsy:
#seasonal-hero {
background: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg") repeat scroll center center #FEEEEF;
width: 100%;
height: 400px;
min-width: 1030px;
cursor: pointer;
position: relative;
}
Background images usually cannot be dragged, the source of the elements background can be found with the inspector:
JSFiddle Demo
div{
height:300px;
background: url('http://lorempizza.com/1000/500');
}
<div>Background-Image</div>
They're just CSS background images:
Demo
HTML
<div id="container">
This is the content.
</div>
CSS
#container {
padding: 10px;
min-height: 600px;
width: 100%;
background: url(//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg) repeat-x;
}
In CSS you use the background-image rule:
background-image: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg");
this is the one on the page you link uses.
Best,
Michael
Related
body
{
background-image:url("hamburger.jpg"),url("glitter.png");
background-blend-mode:color-dodge;
filter:blur(5px);
}
I've added two background images,a main jpg image and another png image with glitter effect. I'm trying to blend them using color-dodge, but the glitter dominates. Also,I need to blur the glittering? I tried blurring the image, but only the text gets blurred.
I'm totally getting what you want to achieve here. Yes, you can stack one background-image over the other, either by making use of two separate elements or with the help of a pseudo-element.
With that being said, you won't be able to bring about the effect you are looking for. Why? Because on blurring the image, you are blurring the whole image, not the specific sparkle particles present in the bitmap (there is no way you could do that). Blurring of the whole image creates a misty-kinda effect and I guess it is not what you might be looking for.
I played a bit with some images, stacked them up one over the other, adjusted opacity and filter, and below is what I came up with; see if that helps.
.effect {
position: relative;
height: 100vh;
width: 100vw;
background-image: url("https://unsplash.it/700/400?image=411");
display: flex;
justify-content: center;
align-items: center;
}
.effect:after {
position: absolute;
z-index: 2000;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("https://s3.amazonaws.com/spoonflower/public/design_thumbnails/0249/0963/rrrrSparkle_silver_mirror.png") 0 0 no-repeat / cover;
content: "";
filter: blur(3px);
opacity: .35;
}
.effect-inner {
position: relative;
z-index: 3000;
}
<div class="effect">
<div class="effect-inner">
<h2>CSS is fun!</h2>
</div>
</div>
If you are looking for more, you definitely need a JavaScript solution as CSS is not going to help much here.
You forgot to specify which language you want, JavaScript, CSS or HTML. For CSS you want the code in, but for CSS just type in:
.Background Image {
filter: blur(20px);
}
That is way easier. But if you are using color blend, then you will need to blur the bigger image
You can also do many other things with filer, for example you can edit the contrast and shadow. If you want to learn more about filter go to this website:
Learn More
If you are asking about HTML or JavaScript, then comment, becouse you didn't write it in the "question's description".
I cannot figure out how to center this image on my mobile website.
Here is the code I am using, I am a beginner in CSS so I'm sure this is an easy fix. Just need some help. Thanks
#emotion-header-img {
display:none;
}
#emotion-header {
height:100px !important;
background-image:url("http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png") !important;
background-repeat:no-repeat !important;
background-size:contain !important;
}
Assuming you want the element to be centered horizontally and vertically as well:
/* generated from howtocenterincss.com, personally tried and tested! */
#emotion-header {
display:flex;
justify-content:center;
align-items:center;
/* height:100px !important; no need for this if you don't want to limit size*/
background-repeat:no-repeat !important;
background-size:contain !important;
}
#emotion-header-img {
height: 100px;
}
<div id="emotion-header">
<img id="emotion-header-img" src="http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png" alt="image header" \>
</div>
Of course there are many many other possibilities, and things get complicated when you want to add support for old browsers like IE7 or IE8. On anything before IE11 you would need to use a table cell. The above code snippet works for IE11 and mordern browsers.
A relevant and good resource I've found when trying to center things in CSS is howtocenterincss.com, which generates the right CSS for you based on your settings and choices. In fact, contrary to the name of the web app, it handles all sorts of alignments too. Just note that the generated code is to be embedded inside HTML elements with the <style> tag, which you can just extract whatever is inside those style tags and move to a CSS file for use.
So you mean want to align the background-image? If right, you can use background-position. Example:
#emotion-header {
width: 200px;
height: 200px;
border: 1px solid #ddd;
background-image: url("http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png");
background-size: 100px;
background-repeat: no-repeat;
background-position: center;
}
<div id="emotion-header"></div>
I was looking at ways to include a title in a page and I have come across this website: (see image below) which does exactly what I want but I can't figure out how to accomplish it. The trouble I have is in only having a single title image at the top without it repeating through to the bottom. I have used the css background-image:url(image) on the main div but the repeating image problem is present. Any help or insight on this matter will be greatly appreciated.
EDIT: I need the rest of the background to repeat until the end. I think having the rest of the background be a separate image may be part of the solution but I don't know if a title image div can be forced to the same layer. Again any insight is valuable as I am new to HTML and CSS. Also this is the best example website I can find, if you are offended please edit with a better example. Thank You!
You can get it done using the below CSS,
#elemId
{
background: #00ff00 url('testimage.jpg') no-repeat top left;
}
Hope it will help
background-repeat:no-repeat;
This is the css trick to NOT repeat a background image.
If you didn't know this already, how the hell could you make it to this website ?
from you link
body {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
font-family: Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
}
#wrapper {
background: url("/marines-theme/images/layout/body-background.jpg") repeat-x scroll left 23px rgba(0, 0, 0, 0);
margin: 0 auto;
min-width: 980px;
overflow-x: hidden;
}
#overview-wrap {
background: url("/image/image_gallery?uuid=a394504c-a638-449e-bb56-b517cfe7d3ee&groupId=10162&t=1349957392552") no-repeat scroll center top #000000;
}
Those are nested markups like so :
<body>
<div id="wrapper">
<div id="overview-wrap"></div>
</div>
</body>
That's about it.
ps. i added a screenshot of what you want to show. Can you remove the (now useless) link?
I want to show an Animated GIF while images loads and I want to do this using CSS. (eg: without JS if possible).
<img src="images/users/girl1.png" class="thumbnailPreLoader memberImage"/>
.thumbnailPreLoader {
background: url('/images/image-preloader.gif') no-repeat scroll center center #F9F9F9;
height: 101px;
width: 101px;
position: relative;
}
div#preferredMembers img.memberImage {
border: 1px solid #808080;
padding: 3px;
}
Above is what I'm currently working with and you can see this at www.datingjapan.co (set of 5 thumbnail images).
I'm currently finding I just don't see the GIF.
If I go into chrome developer mode and change the path of the img I can see the GIF then so I know the path etc are correct.
Is this possible? Is there a trick I'm missing? any help would be greatly appreciated.
Note: I know how to do this with jquery .load() but it would suit me much better to just attach a CSS class.
thx
try removing the scroll in background: url('/images/image-preloader.gif') no-repeat scroll center center #F9F9F9; It is not required here. It solved the issue in my chrome inspector...
I am not good with CSS but have downloaded a template off the net and need to work with that.
I am sure this is a pretty simple thing to do, basically in my html file I have this code:
<div id="topbar"></div>
and in the CSS file I have this code:
#topbar {
height: 104px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
}
My question;
how do I make the image/logo into a link (without a border of course) so that people can click it and come back to the homepage?
please recommend a good tutorial to make "table-less" based layouts for html pages.
I am kind of old school and only know how to make a layout with a table, I think i need to upgrade my skills :)
I think you could make the logo into a link like this:
HTML:
<div id="topbar"><img src="images/logo.png" alt="logo"></div>
CSS:
#topbar a {
color: #ffffff;
border: 0;
}
Note: Background images can't be formatted as links.
If you want it to be clickable, you should put the image into the HTML like this:
<img src="images/logo.png" alt="">
and use
#topbar {
display:block;
height: 104px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
border:0;
}
Otherwise you'd need to resort to an empty anchor element and/or Javascript, which I'd consider bad practice in this case.
1) Background images can't be made into links. What you could do is make the DIV a link instead:
<a id="topbar"></a>`
#topbar {
height: 104px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
display: block;
border: none;
}
2) Google 'css layout' and begin reading. There's hundreds of thousands of tutorials out there. If you are completely lost, I'd start with a good book:
http://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321509021/ref=pd_sim_b8
http://www.amazon.com/Introducing-HTML5-Voices-That-Matter/dp/0321687299/ref=sr_1_7?s=books&ie=UTF8&qid=1318775902&sr=1-7
You really don't want your logo to be a background image. The reason is that background images are not shown when you print. More than likely, you will want your logo visible on a printed copy.