I'm trying to place this picture at the background of my page in a div. I'm trying to make it full screen "in width". so the size of the picture is 980x420, but it just simply doesn't work. I know I'm missing something but I can't find it anywhere.
CSS
.Sil{
max-width: 100%;
height: 300px;
background: url(../Images/TALENT.png) no-repeat;
}
HTML
<div class="Sil"></div>
There is a possibility your image is smaller than 980px. If that's the case you can change from max-width: 100%; to become width: 100%'. Other option is to usebackground-size: cover;`
For More Information! Go and Checkout...
Related
I am trying to make my youtube embedded video 100% width of the screen like can be seen here but without black space between the edges which can be seen here at the side of the video. this is caused by me setting a max-height of 600px.
.
I am able to make the video responsive, and I want to set a max-height on it so that when the screen is big that it doesn't take up the entire screen, but instead just a section that is responsive but remains the same height like on the site I have shown above.
Please see jsfiddle here. If you resize the jsfiddle and make it go as big as it can you will see that it stretches below the end of the screen. I want to prevent this, but without creating black space between the video and the iframe border. By setting max-width on the iframe this black space appears which i want to avoid.
I hope there is no confusion, but if so please let me know and i can provide more details. I can see that the iframe attributes are constantly changing in the page I have provided as an example, but cannot see where this is happening.
#home-video {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
}
#home-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main-image {
width: 100%;
background: url(http://ichef.bbci.co.uk/news/976/cpsprodpb/10E0E/production/_88043196_bret_hart_1920x1080.jpg) center center no-repeat;
background-size: cover;
height: 100%;
}
<div class="main-image">
</div>
<section id="home-video">
<iframe id="video " src="https://www.youtube.com/embed/QP5_n5UmbHc "></iframe>
</section>
The page you provided uses this plugin to achieve that effect.
The plugin allows you to set a video as a kind of a background image in the same way as in the page you provided.
Hope it helps.
I'm trying to make my site a little more mobile-friendly. I have some graphs that look best when they can be pretty wide (800px), but I would prefer for them to shrink on mobile instead of having a scroll bar. I've added this to a stylesheet:
#media screen and (max-width:600px){
div.graph {
max-width: 100%;
margin: auto;
height:400px;
}
}
#media screen and (min-width:601px){
div.graph{
max-width: 800px;
margin: auto;
height: 400px;
}
}
And included that in my master page:
<link href="~/Styles/ResponsiveDesign.css" rel="stylesheet" type="text/css" />
Here is one of the divs that holds a graph:
<div class="graph" id="myDiv" ></div>
The problem is when I view the page with the browser full-size now, the graph is huge--far more than 800 px. Even if I change the max-width to something ridiculous like 25px, it's still huge. Any thoughts?
Do like this (and make sure custom CSS is loaded last if you use a library)
Update based on a comment
Since inline style work, add !important like this and it should work
width: 800px !important;
max-width: 100% !important;
and if it does work, you do have another rule overriding these or else they would have worked without the !important
div.graph{
width: 800px;
margin: auto;
height: 150px;
background: red
}
#media screen and (max-width:800px){
div.graph {
max-width: 100%;
}
}
<div class="graph" id="myDiv" ></div>
In this particular case you actually don't need the media query at all
div.graph{
width: 800px;
max-width: 100%;
margin: auto;
height: 150px;
background: red
}
<div class="graph" id="myDiv" ></div>
i think you should set it in percentage.
Ok, so if I understand it correctly you are trying to set the max width to 800px if the screen's width is bigger than 600px. How bout concretely setting the width of the div to 800px if the screen is bigger than 800px?
Alright, than the only other thing I can think of is its calling the other css block where you set the max-width to 100%. Maybe since its the same class name it is doing this I dont know. You could try commenting out that line and just trying it to see what happens. And sorry Im editing and not commenting I just started so I cant comment...?
I think the problem might be with the graph size itself, could you inspect element and check the size of the contents of the graph? My guess is that the div is the correct size, the graph isn't. We'd need to know how you are creating the graph for more specifics. Could you screen or put a demo of the graph?
Possibly also try a more specific selector? Ex:
body div#id div.graph{}
(I can't comment, sorry if this is not an answer)
I tried solving the problem myself, but I can't do it.
Go to my site here:
http://digesale.com/
And scroll down to the footer. Just above the footer you will see an image. It's the one that says "Get Things Done, Start Buying," etc. That's the image I have a problem with...
On my browser/resolution it looks perfectly aligned, but a friend told me that on his resolution it doesn't cover the entire space left-to-right. If you press "Ctrl+-" on your keyboard you'll see the problem.
This is the code I use to put that image there:
<img style="margin-bottom: -20px;" src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" height="300" width="1350">
Can anyone help me make that image cover the whole width of that section so that it looks good even on smaller screen resolutions?
Thank you.
If you need to cover you can use the image as a background:
<div class="background"></div>
and in the css
.background {
background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
The important part is background-size: cover because it fill the entire div in all cases.
EDIT
If you want another behaviour, you can use your old img tag
<img src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" class="responsive-img">
And the css
.responsive-img {
margin-bottom: -20px; /* this was writting in inline style. */
width: 100%;
height: auto;
}
Try the below CSS
.background {
background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
background-size: contain;
width: 100%;
height: 26vw;
}
I have made a full screen slide show on a web page I am making, but as a entry page after they are 'done' with the slide show..I want to put a picture on top with the width expanding to full size in width after the resolution to the user. While the height is gonna be static..like 600px.
Is there a way to do this? With CSS or something? I am new to CSS and after googling for many days I havent found any decent example of what I am trying to make
I do not have any example ready of what I am trying to archieve, but hopefully someone will have a idea of what I am trying to do.
Thanks in advance
You can set two different values in background-size:
.yourimg {
background-image: url('yourimghere.jpg');
background-size: 100% 600px;
}
You can try with a container like this
HTML:
<div id="boom">
plop
</div>
CSS:
#boom {
width: 100%;
height: 600px;
background: url(http://placehold.it/1600x600);
}
Result: http://jsfiddle.net/fx5jM/
This worked for me
.backgroundImage{
background-size:contain;
background-position:top center;
background-repeat: no-repeat;
height:600px;
}
I have a portfolio page with a image display with zoom.
I have this code: http://codepen.io/Mpleandro/pen/LvrqJ
The div that shows the image has a class of .display, on line 13 of the HTML and the css formating for this div isline 90.
The image width will be flexible, so I what I want is to make the containing div inherit the width of image.
I tried the css property auto, inherit and min-with, but nothing works!
Could someone help me?
P.S.: I need a responsive solution.
Thanks
since 1 year has passed you may not be interested in the solution, but hope that helps someone else.
I also had a situation like that where I needed a div to be of the same width as the image and this had to be responsive.
In my case, I set a fixed width for the div
.some-div{
width: 250px;
}
I also had responsive image:
img{
display: block;
max-width: 100%;
height; auto;
}
and then I added a media query with threshold when the fixed width of the div started to affect the responsive nature and simply addedd this:
#media screen and (max-width: 917px){
.some-div{
width: 100%;
}
}
For my project the threshold was 917px when the fixed width started to affect.
I guess it is a solution that will fit everyone since width: 100% after the certain threshold will always be the width of the image if the image is responsive.
I don't know how to give you a perfect answer, but I can hopefully send you in the right direction. First, you can forget about inherit or min-width because they are not what you want.
auto is the default value, and I think that the default behaviour is very close to what you want: the width of the div adapt to its content. If this is not the current behaviour, this is because of many other reasons including the positioning of that div. The thing is, you won't have a proper centering and sizing of the <div class="display"> with only CSS, because it would need a specific explicit width declaration.
Since you already use Javascript to display/hide the good images, you could use Javascript to set the width everytime you change the image that is in the box.
My best advice would be to use existing solutions which are tested, approved and look really good. A 2 seconds Google search pointed me to Fesco which you could try.
I'm not sure if this is what you mean, but if it is, I hope it will help!
If you want your image to fill the div, but to scale with the browser, try setting the width of your div. Next, apply max-width="100%"; height: auto; to your image.
The simplest solution would be to just set .display to display: inline-block;, which would adjust its size to the contained image. If you want to be responsive as well, you need to define an upper limit via max-height: 80%, for example.
Put together, it would look like this: http://codepen.io/anon/pen/IluBt
JS line 17:
$(".display").css("display","inline-block");
CSS for .display
.display {
position: relative;;
background: rgba(255,255,255,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
max-height:80%; /* <-- limit the height */
top:10%;
left:0;
margin:auto;
}
And to align everything nicely:
.loader {
color: red;
position: fixed;
width: 100%; height: 100%;
background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
text-align: center;
}