sound quite easy but at the moment I don't find a solution for it. I simply try to get the vg-controls plugin positioning under the video.
Because I am using the Plugin in Ionic, it is not so usability-friendly when the vg-controls autohide or something. Therefore I like to bringt the vg-controls container under the video-container.
But for now it is always in the video, and only a padding-top is doing the job. But not the full job, because with a padding it is not fully responsive and always depends on the display of the smartphone.
Has anybody a simple solution for this? I use the regular code from the website-tutorials:
enter link description here
Sorry guys, fixed it with simple css code.
Height of vg-controls is 50px, adding a margin-top to the vg-controls-container. Done.
Thanks anyway ;)
Related
I want to make an image to fit the content.
Trimming transparent background will be needed if it is done with a photo editor.
Is there any way to deal with CSS?
Or do I have to edit image before using it?
Thanks in advance!
What I have researched about css feature:
object-fit: It was a little more about aspects
There is no such feature in CSS as far as I can tell.
However, there are two possible solutions fixing your problem.
If it has to be done for an already known image:
You could manually scale the image using background-size and background-position so it does only show the area of the image you need.
If it has to be done for an unknown image:
Using Javascript like this: https://ourcodeworld.com/articles/read/683/how-to-remove-the-transparent-pixels-that-surrounds-a-canvas-in-javascript
I have a problem with my website, for example: https://filmowo.co/odcinki/marvel-cloak-i-dagger-1x1/ when you open the player in fullscreen mode there are site elements under the video. Beware of ads. Here is a screen also:
screen
I was only able to fix the header which has fixed position but with the content section its not working. Can you please take a look? I think its pretty easy but Im not css specialist :)
update:
this is the element that need to be modified, any ideas? https://i.snag.gy/YHy4Ns.jpg
Okay, there was an issue with animate.css plugin which I used to animate a player while loading.
I've just started looking into CSS3 and HTML and I wanted to use it for a University project that asked us to make an ASP.NET website, but I can't get the height of the content to fill the 100% of the browser... It's actually not even taking into consideration the content of the default.aspx.
Tried a bunch of stuff on other questions around here, but most times they either don't do anything or mess the whole positioning of everything.
Was hoping you guys could give me some tips on how to fix it. Here's the fiddle: JS Fiddle
Thanks in advance.
You need to provide the form also with height: 100%;. Check out this fork of your fiddle.
http://jsfiddle.net/tushar2289/a5Bhv/1/
Basically I'm very very new to .css and HTML and I have been using Adobe Muse or word press to make sites and have been able to get by. Well I have been integrating a shopping cart system called Foxycart into one of my sites and I can not for the life of me get the header, shadow under the header and middle image (repeating pattern) to stretch across the screen. Adobe muse does this by using JavaScript, but when I cache my template for Foxycart the JavaScript no longer works. Which is fine I would like to use .css to stretch the header and middle background anyway. The problem is I can not figure it out. I hate to ask for help but I have spent over two days trying to figure it out and still not luck. I specialize in graphics, so if anyone that helps me out needs anything photoshop'd or what not just let me know. For my own sanity to need to figure this out!
Code is cached by Foxycart located here: https://shavemate.foxycart.com/checkout.php
Some browsers add padding around the viewport, so in order to get a true "full width" effect you need to make your header have a absolute position along with top:0; left: 0. The tricky thing here in my experience is getting the width to 100%. With an absolute positioned element, 100% width seems to go off the right side of the screen. It may have to be done with javascript or someone here with more mastery of CSS can guide you.
in site properties, layout you can make margins 0,0,0,0
Also, if you want something to be 100% width just snap the edges to each side of page browser.
hope this help.
yd.
ok i need to make a whole background image so that it resizes with the window and keeps the same proportions
i need to do this only using css
does anybody know how i have looked but cannot find a working solution.
i tried some suggestions on here too but does not seem to work for me either
thankyou
You might want to read the article "Supersize that Background, Please!" on A List Apart. It presents "old" as well as modern techniques.
In order to do it in vanilla CSS, you cannot settle for less than CSS3 since both Background and Borders and Media Queries modules are required.
What you are asking for is not possible. Not with standard CSS2.0 and XHTML.
You can make an image tile, but not scale to fit your page.
The link you provided does just that, it repeats the image in a tile fashion. Background images do this by default.
Sorry, CSS can't stretch images. Only an <img> tag can do that. So you'll have to put one of those in the background.
Maybe you can do that with CSS3, I don't know, but even then browser support is not very good yet.
Here is an example of using a div (100% width + height) containing an img tag to use as the background, might be worth a look.
Try this technique: http://css-tricks.com/perfect-full-page-background-image/